TypeScriptをはじめるとき知っておくと捗る

⚙️ tsconfig.json

tsc コマンドで変換するときのための設定ファイル。

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "./dist",
    "baseUrl": "./src"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

一部しか理解できてないが、WebStorm や VS Code でデバッグ実行するなら "sourceMap": true が必須。"outDir": "./dist" で js ファイルの出力先を指定している。
exclude では node_modules 配下やテストファイルを変換の対象外と指定している。

🌲 ディレクトリ構成

リポジトリを作ったときに以下のようなディレクトリ構成にするのが一般的みたい。
src 配下に ts ファイルを置き、tsc コマンドで dist 配下に js ファイルと SourceMap を出力させる。実行するときは node dist/main.js すれば良い。

├── dist
│   ├── main.js
│   └── main.js.map
├── node_modules
├── src
│   └── main.ts
├── test
│   └── main.test.ts
├── package.json
├── tsconfig.json
└── yarn.lock

dist は .gitignore に追加しておきコミットしない。
サーバサイドの Node.js + TypeScript で使うときはデプロイ時にトランスパイルする手順を踏む。これも pakcage.json に書いておけばいい。

"scripts": {
  "prestart:dev": "rm -rf dist && tsc",
  "start:dev": "node dist/main.js"
}

yarn start:dev するだけで prestart を終えた後に起動してくれる。npm-scripts を参照。

型定義ファイル

npm パッケージとして @types で提供されている。
TypeScript2.0 以前は tsd とか typing という型定義ファイルの管理ツールが使われていたそうだが、現在は必要な型情報がほしければ npm install @types/node みたいな感じで個別にパッケージをインストールするだけでよくなった。
TypeScript ではデフォルトで node_modules/@types 配下の型を参照してくれる。
有名な npm パッケージで公開されているライブラリのほとんどは型定義ファイルが用意されている状況。TypeSearch というページで検索できる。

🏹 ts-node

TypeScript は拡張子 ts ファイルを tsc コマンドで js ファイルに変換して実行するものだけど、ts-node を使えばそのまま実行できる。devDependencies に加えておけば良い。

$ yarn add -D typescript ts-node

実行するときは

$ yarn run ts-node src/main.ts

あらかじめ package.json に記述しておけば yarn start するだけでよくなる。

"scripts": {
  "start": "ts-node src/main.ts"
}

でも ts-node だとデバッグ実行できないみたいなので、自分はすぐに使わなくなった。console.log デバッグが好きな人向け。
Node options: に --inspect --require ts-node/register を付加すれば IDE でもデバッグ実行できる。 → ts-nodeでデバッグ実行

🎙 トランスパイル ≒ コンパイル

ts ファイルを js ファイルに変換することをトランスパイルと言う。これも広義のコンパイルになるけど、コンパイルという用語は高水準な言語を低水準な言語に変換することを言うそうだ。
TypeScript や CoffeeScript を JavaScript に変換することのように、高水準な言語を高水準な言語に変換するのはトランスパイル。
でも厳密にトランスパイルという用語を使って説明してるサイトはあまりなく、単にコンパイルと言われてることの方が多い。