TypeScript + Node.jsの簡易プロジェクトセットアップ

はじめに

スクリプトを作成しようとする際、毎回手順が曖昧になってしまうためまとめておこうと思います。
TypeScriptとNode.jsを用いたプロジェクトの設定手順を記載します。

環境

Mac OSを用います。 Node.jsとnpmはインストール済みのものとします。

手順

1. 作業ディレクトリの作成

./

$ mkdir typescript-node-setup
$ cd typescript-node-setup

2. npm初期化

./typescript-node-setup

$ npm init

3. TypeScript インストール

./typescript-node-setup

$ npm i --save typescript

4. Node.js型定義の追加

./typescript-node-setup

$ npm i -D @types/node

5. tsconfig.json設定

./typescript-node-setup

$ tsc  --init

'tsconfig.json' の中身は下記を設定する。詳細は割愛。

./typescript-node-setup/tsconfig.json

...
"sourceMap": true, 
"outDir": "./dist",
...
  },
  "include": ["src/**/*" ]
}

6. ts-nodeパッケージをインストール

./typescript-node-setup

$ npm i -D ts-node

package.jsonにscriptsを追加しておく

./typescript-node-setup/package.json

...
"scripts": {
   "dev": "ts-node src/index.ts",
...

7. (任意) ts-node-devパッケージをインストール

./typescript-node-setup

$ npm i -D ts-node-dev

package.jsonへの追加。
watchモードの意味で"dev-w"としてみる。

./typescript-node-setup/package.json

...
"scripts": {
   "dev": "ts-node src/index.ts",
   "dev-w": "ts-node-dev --respawn src/index.ts",   
...

試してみる

./typescript-node-setup

$ mkdir src
$ touch src/index.ts

./typescript-node-setup/src/index.ts

console.log('Hello, World!');

./typescript-node-setup

$ npm run dev-w

こんな感じで環境設定する。スクリプト作成する際に。