TypeScript プロジェクト作成方法

ここでは TypeScript で書いたコードを、 JavaScript にコンパイルして実行する場合のプロジェクト作成方法について説明します。

TypeScript で書いたコードを Node 上で実行するのに何の設定が必要なのか？

Node は TypeScript のコードを直接実行できないので、TypeScript でコードを書いたらそれを TypeScript コンパイラ tsc を利用して、 JavaScript にコンパイルする必要があります。

tsc は、その構成ファイルである tsconfig.json に記述したオプションに従って実行されます。

TypeScript でコードを書く時には通常、各種外部ライブラリを利用することになります。 npm でパッケージ管理を行うので、package.json 設定ファイルが必要です。

また任意設定ではありますが、TypeScript でコードを書く時にはリンタとして tslint を使うと、 統一されたスタイルでコードを書きやすくなります。従ってその設定ファイル tslint.json も構成します。

ざっと、TypeScript でコードを書き、Node 上で実行するには上記の設定が必要です。 ここではそれらの設定方法について、説明します。

設定手順

ここでは foo という名前のディレクトリを作成して、そこにプロジェクトを作成します。 実際はちゃんとしたプロジェクト名をディレクトリ名にしてください。

$ mkdir foo
$ cd foo

まずは npm の初期化をします。

$ npm init

いろいろ聞かれますが、とりあえず全てそのまま Enter で進んで OK です。

この結果 package.json が作成されます。

次に　TypeScript コンパイラ tsc、tslint、@types/node をインストールします。

$ npm install --save typescript tslint @types/node

TypeScript コンパイラの設定ファイル tsconfig.json を作成します。

$ ./node_modules/.bin/tsc --init

> .\node_modules\.bin\tsc --init

これで tsconfig.json が作成されます。tsconfig.json を適当に編集します。

tsconfig.json の構成例を示します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist/", 
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node", 
    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "files": [
    "index.ts"
  ]
}

この例で最後の files の箇所が、コンパイルするファイルリストになります。

次に tslint を構成します。

$ ./node_modules/.bin/tslint --init

これで tslint.json が作成されます。

tslint.jsonの設定例を示します。

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "quotemark": [
            true,
            "single"
        ],
        "no-console": [
            true,
            "debug"
        ],
        "no-trailing-whitespace": true
    },
    "rulesDirectory": []
}

ビルド時にシステムワイドの tsc ではなく、 node_modules 内の tsc を使うようにするために、 package.json に次のように scripts に build スクリプトとして tsc を登録します。

  "scripts": {
    "build": "tsc"
  }

以上で基本的な設定は完了です。必要に応じて設定を変えてください。

ソースコードのビルドとプログラムの実行

プログラムをビルドする際には次のコマンドを実行します。

$ npm run build

これによって dist フォルダ内に index.js が生成されます。

index.js を実行するには次の通り。

$ node ./dist/index.js

以上で TypeScript で書いたコードを node 上で実行して使うための各種設定について説明しました。