Islands in the byte stream

Technical notes by a software engineer

TypeScript 2.0+NodeJSツールを開発するときのプロジェクト構成

npm dependenciesを更新してGitHub Compare Viewのリンク付きでPRするツールを定期実行する - Islands in the byte stream

このci-npm-updateはTypeScript 2.0 (beta) で書いたので、TypeScript+NodeJSツールを開発するときのプロジェクト構成の一例としてざっと解説しておきます。

最近はRailsなどのウェブアプリのJSもnpmで管理するようになったため、そういう条件でNodeJSツールを開発することも増えてくることでしょう。

Table of Contents

エディタ

Visual Studio CodeはさすがにTypeScriptサポートはしっかりしていて、次のようにTypeScriptの型定義にしたがって補完をだせます。補完の際に引っかかりを感じることもないですし、構文エラーの指摘なども迅速です。

f:id:gfx:20160731215342p:plain

ただし今回はTypeScript 2.0 betaを使いたいので、 npm install --dev typescript@beta で入れたtypescript language service*1を使うような設定が必要です。

今回は .vscode/settings.json に、以下のようなJSONを設定しました。

{
    "typescript.tsdk": "./node_modules/typescript/lib/"
}

vscodeで本格的にプログラミングするのが初めてなら、ざっとドキュメントも目を通しておくといいでしょう。

とりあえずvscodeで最初におぼえるべきショートカット (for Mac) は command + shift + p (コマンドパレット)です。これはIntelliJ IDEAでいうところの command + shfit + a で、エディタコマンドを検索して実行するためのものです。最初はショートカットを無理におぼえるのではなく、コマンドパレット経由で呼び出すのが楽だと思います。

tsconfig.json

tsconfig.jsonはTypeScript compiler (tsc) に与える設定です。これを適切に設定しておくと、引数なしでtsc(1)を起動してもよしなにビルドしてくれます。

リファレンス:

tsconfig.json · TypeScript

ci-npm-updateでの設定:

ci-npm-update/tsconfig.json at master · gfx/ci-npm-update · GitHub

またtsconfigを作るときにプロジェクトの構成と配布形式を意識することになります。

つまり、今回はnpm distとして配布するので、TypeScriptソースファイルは配布物に含めず、ビルドしたJSと型定義ファイル *.d.ts をパッケージに含めます*2。また開発中は度々ビルドしてJSと型定義ファイルを生成するので、その成果物をどこに置くかを決めます。

成果物はデフォルトだとTSファイルと同じディレクトリにおかれます。このへんは好みだと思うのですが、私はこの挙動を変えたかったので、以下のような構成にしました。

  • src/ - TSファイル。npm distには含めない
  • lib/ - JSファイルと型定義ファイル。npm distに含める

そしてこれにしたがって outDir を設定します。

TSLint

コーディングスタイルを強制するツールです。

Visual Studio Codeのエクステンションを入れると編集中に報告してくれるのではかどります。

TSLint | Visual Studio Marketplace

なおtslintは "tslint:recommended" というプリセットがあるのですが、Visual Studio Codeのデフォルトのフォーマットルールだと警告をだす設定があり、一部変えています。なるべく奨励と銘打たれたスタイルで行きたいのですが、難しいものですね。

ci-npm-update/tslint.json at master · gfx/ci-npm-update · GitHub

Task Runner

今回はシンプルにしたかったし、TSファイルをビルドするだけなのでgulpやgruntは使ってません。そのかわり、npm scriptsを設定してコマンド一つでビルドできるようにしています。

ci-npm-update/package.json at master · gfx/ci-npm-update · GitHub

ビルドの際にtslintも通すようにしているので、たとえばmissing semicolonのよようなちょっとしたtslint違反でもビルドが通らないのですが、このへんは慣れれば減ってくるはずです。

Visual Studio Code Tasks

npm scriptsをvscodeから起動するために .vscode/tasks.json を設定しています。

リファレンス:

Tasks in visual Studio Code

プロジェクトの設定:

ci-npm-update/tasks.json at master · gfx/ci-npm-update · GitHub

(このJSONにはコメントを書けるようだ…)

開発中よく使うのは command+shift+b のビルドコマンドでした。

shrinkwrap

このプロジェクトでは npm-shrinkwrap.json をコミットしていますが、プロジェクトのドッグフーディングのために入れているだけです。。普通のCLIツールやライブラリではこれは不要なので真似しないでください。

所感

TypeScript 2.0とその開発環境は非常に良く出来ていると感じます。もはやES5とは別物といっていいくらい快適ですし、ES2015とくらべても生産性(かけた時間に対する品質のよさ)が高いと思います。

ウェブアプリでもどんどん使っていきたい。

See Also

*1:型定義に基づいた補完などを行うサービスで、TypeScript配布キットに付属しています。

*2:TSファイルも配布物に含めたいところですが、vvakame氏いわく、それをするとtscコンパイラがTSファイルと型定義ファイル両方みにいってしまうという問題があるとか。