TypeScript をプロジェクトに導入する

いま構築している Web アプリケーションの JavaScript を TypeScript に置き換えることにした。

久しぶりに JavaScript を書いてみて思ったのは、
JavaScript はプログラムを書く時間と同じくらい、
プログラムのどこに問題があるのかを調べる時間がながい。
エラー表示が適切ではなかったり、問題がどこにあるのかヒントを得るのが大変だったりする。

もう生で JS を書く時代は終わっていたのかもしれない...。

プロジェクトに TypeScript を導入する

何はともあれ、新しい技術を身につけるときはオフィシャルページを見るのが大事。
技術の変遷が早い領域は、特に情報があっという間に古くなる。
英語を読めない＝新しい技術を身につけることができないと、
ほぼ同義になってしまうので英語を読む習慣は必須だ。

TypeScript のホームページはこちら。
https://www.typescriptlang.org/

TypeScript は tsc というコマンドが使えるようになっていれば、
利用できる環境が整っている。

$ tsc -v
Version 2.2.2

でなければ、TypeScript のインストールが必要。
Visual Studio を使わない場合は、TypeScript のインストールには npm を使う。
現時点では、npm は node.js をインストールすると勝手についてくる。
node.js を自分の環境にインストールしよう。

Node.js
https://nodejs.org/ja/

Node.js をインストールしたら、TypeScript の公式ページを参考にして
TypeScript をインストールする。

$ npm install -g typescript

TypeScript の書き方

TypeScript の素晴らしいところは、
既存の JS のファイルをそのまま TypeScript に持ってきても、
とりあえずビルドが通るという点だと思う。

何はともあれ、今自分の持っているプロジェクトを ts ファイル（TypeScript のファイル）
に置き換えて、tsc でビルドしてみよう。

私は普段、JetBrains 製の IDE を使っている。
JetBrains の IDE にはほとんど初期状態で TypeScript をビルドする環境が整っている。

tsconfig.json というファイルがある。
これは重要なファイルで、どの TypeScript のファイルをビルドするのか、
どのような設定でビルドするのかが書いてある。

とりあえずデバッグなども必要なので、開発のための設定として次のように記述してみた。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "assets/javascripts/",
    "sourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "ts/core.ts"
  ]
}

JetBrains の IDE は、この tsconfig.json を発見し、この設定に従って自動ビルドをしてくれる。
手動でビルド実行することも可能なので、IDE から設定を見つけ出して頂きたい。

jQuery を使えるようにする

（※ この項は、あまり詳しくない部分なので、説明が正確でない可能性があります）

jQuery を使っている場合、TypeScript 内で構文エラーが発生するかと思う。

DefinitelyTyped という物を導入すると、構文エラーを解決することが出来る。
https://github.com/DefinitelyTyped/DefinitelyTyped

npm から jQuery の定義ファイルをダウンロードするらしい。
TypeScript のプロジェクトルートで、次のコマンドを実行してみる。

$ npm install --save-dev @types/node
$ npm install --save-dev @types/jquery

node_modules ディレクトリ以下に、定義ファイルがダウンロードされる。
jQuery を使っていて、構文エラーが発生しているファイルの先頭に、１行、次のようなコメントを記述する。

/// <reference path="../node_modules/@types/jquery/index.d.ts" />

// It's the entry point for your project.
$(function () {
});

path はダウンロードした定義ファイルの場所を指定すること。
（このあたり、この方法がベストかわからないので、臨機応変に変更して頂ければと思います）

以上で、私の環境で TypeScript の導入が完了した。