ts-nodeを使ってlocalでTypescriptを楽に実行できるようにする

Typescript Node

はじめに

この記事は、Typescript(.tsファイル)を直接実行できるようにする環境構築のメモです。
前提としてnodeとnpmはインストール済みとしています。

今回はnpxを使用しているのでインストールしていない場合は、インストールしておきましょう。

$ npm install -g npx

プロジェクトディレクトリの作成

$ mkdir typescript-node
$ cd typescript-node

package.jsonの生成~typescriptの追加

npm init -y
npm install typescript
npm install -D @types/node

tsconfig.jsonの作成

$ touch tsconfig.json

or

$ npx tsc --init

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ]
}

Typescriptファイルの作成

$ mkdir src
$ touch src/index.ts

src/index.ts

function hello(message: string): string {
  return `Hello, ${message}!`
}

console.log(hello('World'))

typescriptパッケージに同梱されているtscコマンドを実行しましょう。

$ npx tsc

するとdistディレクトリの中にindex.jsとindex.js.mapが生成されます。

$ ls dist
index.js      index.js.map

生成されたindex.jsを実行してみましょう。

$ node dist/index.js
Hello, World!

ts-nodeを導入して手間を減らす

毎回.tsファイルを編集してtscコマンドでコンパイルしてnodeで実行するのは手間もかかる上に面倒なのでtsc -> nodeの実行を自動で行ってくれるts-nodeを導入しましょう。

$ npm install -D ts-node

npm installが終了したらts-nodeコマンドを実行してみましょう。

$ npx ts-node src/index.ts
Hello, World!

package.jsonのnpm-scriptにdevを追加

{
  ...
  "scripts": {
    "dev": "ts-node src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

早速実行してみましょう。

$ npm run dev

> typescript-node@1.0.0 dev /Users/<username>/typescript-node
> ts-node src/index.ts

Hello, World!