初心者がTypeScriptでつまずいたポイント＆解決策(初心者に向けて)

1.はじめに

こんにちは。私は私立大学 文理融合系の学部の２回生で、
Web開発を学びはじめて５ヶ月ぐらいです。
私は1回生のときに、授業内で初めてプログラミングに触れました。
そして、数学とかパズルとかみたいな楽しさを感じて、授業以外でも勉強するようになりました。
まずは、UdemyでWeb開発の基礎とReactの基礎を学び、アウトプットする場所として、PDCAサイクルを管理するWebアプリを作成しました。(https://pdca-app.vercel.app/)　
※ログインに時間がかかることがあります。
次に、何を学ぶべきかをChatGPTに聞いた結果、TypeScriptがおすすめと言っていたので、学んでみました。

2.TypeScriptのメリット（ChatGPTより）

• 型があるおかげで、バグを未然に防げる
• 可読性・保守性が高い
• 「実務レベル」「アプリ開発」ではTypeScriptが主流

だそうです。

3.今回行ったこと

まず、先ほど述べたReactのコースに含まれている約２時間分のTypeScriptの動画を視聴しました。
そして、既存のWebアプリ（PDCAアプリ）のコードをTypeScriptに書き換えました。

4.つまずいたポイント＆解決策

4.1. バックエンド

私は、セッションの管理のライブラリとして、express-sessionを使っています。そこで、server.js　→　server.ts　に変更したとき、「sesioinのsession.userIdの型が指定されてないよ」というエラーが表示されました。
まず、tyeps/express-session.d.tsという型定義ファイルを作成して、そこで、

//types/express-session.d.tsに作成

import "express-session";

declare module "express-session" {
    interface SessionData {
        userId?:string;
    }
}

という風に、express-sessionの型を拡張してuserIdに型を定義してみました。
しかし、なぜか、server.tsに反映されませんでした。
この解決方法は、簡単で、tsconfig.jsonで以下の様に設定するだけで良いんです。

//tsconfig.jsonに作成

{
  "compilerOptions": {
    ...
  },
  
  //パターン１
  "include": ["**/*.ts"]
  
  //パターン２
  "include":["types","server.ts"]
}

"include":[...] の [ ]の中にはts,stxのファイルやフォルダを指定する必要があるのです。フォルダを指定した場合は、そのフォルダ以下の全ての要素がincludeされることになります。
パターン１ではすべてのts,tsxのファイルをincludeするという意味で、
パターン２ではtypesフォルダとserver.tsをincludeするという意味です。
これで、無事sessionのuserIdに型を指定することができました。
ちなみに、.tsファイルでexpress-sessionを使う際は、

//server.tsで作成

❌const session = require("express-session");

✅import session from "express-session";

という感じで、importを使う必要があります。

4.2 デプロイ

バックエンドとフロントエンドをすべてTypeScriptに書き換えて、
とくに、vscode内でエラーが出ていなかったので、このまま、デプロイしてみました。
Vercelでは無事デプロイできたのですが、Renderでは、
Error : Could not find a declaration file for module 'express'.
Error : Could not find a declaration file for module 'express-session'
というエラー出ました。
これは、「expressとexpress-sessionの型定義ファイルが見つからない」という意味です。
local環境では、型定義ファイルはインストールされているのに、Renderでは型定義が存在しないということです。
このとき、ビルドコマンドがtscだけだったため、Renderでは型定義ファイルがインストールされてなかったのです。
なので、ビルドコマンドを

npm install && npm run build

に変更しました。
これによって、Renderでも型定義ファイルがインストールされるので、無事エラー解消ができました。
ちなみに、package.jsonでは

{
  "name": "pdca-app",
  "version": "1.0.0",
  "main": "dist/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/server.js",
    "server": "nodemon server.ts",
    "build": "tsc"
  },
  ...
  }

という風に設定されています。

5.おわりに

今回はUdemyで基本を学んでから、既存のコードを書き換え終わるまでに５日かかりました。
動画視聴は時間がかかりましたが、コードの書き換えはすぐに終わりました。
エラーの処理をしているときに、ChatGPTに聞くことがほとんどなんですけど、私の場合、聞いてばっかｒだと、今何をしているのかが分からなくなり、ChatGPTに聞きまくっても同じことばっか、返ってきて、進んでる感じがしないときがあります。
そして、上記のRenderのエラーみたいな単純なエラーでも、なかなか解決できないことがよくありました。
そういったつまずきから、今何をやっているかをしっかり理解しながら、エラー処理をしていくことで、ずっと同じ場所で足踏みをせず、ちょっとずつでも進むことができるのだと学びました。