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

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

ts ファイルを js ファイルに変換することをトランスパイルと言う。これも広義のコンパイルになるけど、コンパイルという用語は高水準な言語を低水準な言語に変換することを言うそうだ。
TypeScript や CoffeeScriptJavaScript に変換することのように、高水準な言語を高水準な言語に変換するのはトランスパイル。

🏹 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"
}

⚙️ 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 を参照。