Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

既存のJavaScript (Node.js)をTypeScriptにする

TL;DR;

  • 迷ったら最初からTypeScript入れておくが吉
  • 移行するならimplicit*系のオプションはOffにして優しいTypescriptに
  • tsc + nodemonで効率のいい開発

この記事の対象

  • 今あるJavaScriptで書かれたプロジェクトにTypeScriptを導入したい人
  • JavaScriptに少しずつTypeScriptを入れたい人
  • Node.jsで動かすことを想定しています。(フロントエンドではない)

1. まずTypeScriptを導入する

これは簡単。yarn add --dev typescriptだけ。

2. tsconfigを書く

これが面倒。include, excludeは各自頑張ってください。どこかのを参考にすればどうにかなります。(node_modulesとかをexcludeに入れるのを忘れずに。とっても重くなります)
compilerOptionsで悩んだので、必要そうなところを載せます

  • targetここ見て自分のNodeがどこまで対応しているかで決めるがいいと思います。Node 13を使っているのならes2019まで対応しているのでes2019でいいかと思います。

  • libは「es2018にはないけれど、これもあることにしてね」とtypescriptに伝える設定です。polyfillされるわけではないことに注意してください

  • implicit*は、導入前に死なないようにとりあえずfalseにしておくことをおすすめします

  • implicitAnyは個人的にずっとfalseでいいように思います。必要なところだけ形を書いて安全にしていけるところがJavaScriptをTypeScriptのいいとこどりができると思いますし、一番効率的かと思います。

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es2019",
    "module": "commonjs",

    // ReactのSSRをしている場合はこの辺の設定が必要
    "jsx": "react",
    "lib": [
      "dom",
      "es2019.array" // targetがes2017だけどArray.flatとか使いたいよーと言う場合に追加してください。他にもいろいろあります。
    ],

    // 段階的に移行するならtrueにします。tsファイルからjsを読み込めるようになります。逆は無理
    "allowJs": true,

    // jsファイルの形チェックもしたければtrueにしましょう。全部のエラーに対応しなければいけなくなるのでfalseがおすすめ
    "checkJs": false,

    // d.tsファイルのtypeチェックを無効化します。(falseだとnode_modules内でエラー出まくりました)
    "skipLibCheck": true,

    // 後述するモジュールと組み合わせるとtsファイルの行数でスタックが見られるので楽です
    "sourceMap": true,

    // デコレーター使いたい場合はtrueで。Reactで使っているので必要でした。
    "experimentalDecorators": true,

    // TypeScript 3.4以上で使えます。watchしながらのトランスパイルが爆速になります。付けない理由はない。
    "incremental": true,

    // ここから先はlint的な要素です

    // JavaScriptから移行する場合、この辺はfalseにしておかないとかなり辛いです。特にanyは無理です。
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitThis": false,

    // 使っていない変数が定義されてたら怒られるオプション。これはes-lintとかを導入していればトランスパイル自体はエラーにしなくてもいいかもしれません。
    "noUnusedLocals": true,

    // ここも移行していく場合とりあえずfalseでいいと思います
    "strictNullChecks": false, // trueにすると例えば`number`にnullやundefinedを代入できなくします
    "strictFunctionTypes": false,
    "strictBindCallApply": false,
    "strictPropertyInitialization": false,
  },
}

3. 変更があったらサーバーを自動で再起動とかしたい

全部入りなts-nodeを使う方法もありますが、今回はtscコマンド + nodemonを使います
トランスパイル済みjsは./distに吐き出されるものとします。

nodemon.jsonを作ります。distをwatchして、変更があれば"exec"に書かれている内容を実行します。この場合server.jsの再起動です
"restartable"はその文字を打つとexecを強制的に再実行します。あんま使いませんがたまに便利です。

nodemon.json
{
  "restartable": "rs",
  "watch": [
    "./dist",
  ],
  "exec": "node ./dist/server.js"
}

まずtypescriptのトランスパイルを実行します
yarn tsc --watch -p tsconfig.json

次にnodemonを起動します
nodemon --config ./nodemon.json

これで、
ファイルを変更したらtypescriptがトランスパイル -> 吐き出されたファイルをnodemonが検知して再起動
となり効率の良い開発が可能になります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?