第1章 戦闘準備だ!TypeScript!

1.1 インストールしてみよう

Node.jsのセットアップはすでに完了しているものとします。筆者はNode.jsのインストールとバージョン管理にnodebrew*1を利用しています。

TypeScriptのインストールには、Node.jsのパッケージマネージャであるnpm (Node Package Manager)を利用します。TypeScriptをインストールすると、tscというコマンドが利用可能になります。tscコマンドでTypeScriptコードのコンパイルを行います。

# -g をつけるとグローバルなコマンドとしてインストールする
$ npm install -g typescript
# 省略
$ tsc -v
Version 2.0.0
$ echo "class Sample {}" > sample.ts
$ tsc sample.ts
$ cat sample.js
var Sample = (function () {
    function Sample() {
    }
    return Sample;
}());

なお、本書執筆時点ではnpm install -g typescriptで導入できるTypeScriptバージョンは1.8.10です。2.0.0以降が使いたい場合はしばらくの間はnpm install -g typescript@betaとする必要があります。

ともあれ、これで準備は整いました。

cutting edgeな最新版コンパイラを利用したい場合は次の手順で行います。

$ npm install -g typescript@next
# 省略
$ tsc -v
Version 2.1.0-dev.20160716

実際にはプロジェクトごとに利用するTypeScriptのバージョンを変えたい場合がほとんどでしょう。常に最新のバージョンだけを使い続けるのは自分の管理するプロジェクトが増えれば増えるほど難しくなりますからね。その方法を次に示します。

$ npm init
# Enter連打
$ ls package.json
package.json
$ npm install --save-dev typescript
$ ./node_modules/.bin/tsc -v
Version 2.0.0

この、node_modules/.binにはプロジェクトローカルに導入された実行ファイルが集められています。npm binコマンドを実行するとパスが得られます。macOSやLinux環境下では$(npm bin)/tscとするとプロジェクトローカルのtscコマンドへのパスが取得できます。

さらにnpm scriptsでは$PATHにnode_modules/.binが自動的に追加されます。このため、npm scriptsをうまく活用してプロジェクトのビルド環境を構築すると上手かつ自然にプロジェクトローカルなビルド環境が整えられるでしょう。

$ npm bin
$PWD/node_modules/.bin 的なパスが表示される
$ $(npm bin)/tsc -v
Version 2.0.0

1.2 tsconfig.jsonを準備する

TypeScriptではtsconfig.jsonという設定ファイルを利用します。必要なコンパイルオプションやコンパイル対象となるファイルはすべてtsconfig.jsonに記述します。すべてのツールやIDE・エディタ間で共通に利用できる設定ファイルになるため、大変役立ちます。

まずはtsconfig.jsonを作成してみましょう。tsc --initで作成できます。

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.
$ cat tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    },
    "exclude": [
        "node_modules"
    ]
}

この設定ではTypeScriptが利用できる制約の多くをONにしていないため、完全にガバガバな設定です。一番最初に利用する例としてはいいかもしれませんが、運用するにあたってTypeScriptが与える堅牢さのすべてを享受することはできません。

本書のサンプルコード用tsconfig.jsonをリスト1.1に示します。この設定をベースに自分たちにとって都合がよい設定値へ変更したり制限を緩めたりすることをお勧めします。具体的に"include"や"exclude"の値は一般的なフォルダ構成を対象にしたものではないので変更したほうがよいでしょう。

リスト1.1: 本書サンプルコード用のtsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es6",
        "declaration": true,
        "lib": [
            "dom",
            "es2017"
        ],
        "types": [
            "node"
        ],
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitUseStrict": false,
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "traceResolution": false,
        "listFiles": false,
        "stripInternal": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": false,
        "pretty": false,
        "noEmitOnError": true
    },
    "include": [
        "code/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "code/definition-file/usage/",
        "code/definition-file/augmentGlobal/",
        "code/definition-file/issue9831/",
        "code/**/*-invalid.ts",
        "code/**/*-invalid.d.ts",
        "code/**/invalid.ts",
        "code/**/invalid.d.ts",
        "code/**/*-ignore.ts",
        "code/**/*-ignore.d.ts",
        "code/**/ignore.ts",
        "code/**/ignore.d.ts"
    ]
}

より詳しい説明は第5章「オプションを知り己のコードを知れば百戦危うからず」を参照してください。

1.3 試しにコンパイルしてみる

tsconfig.jsonができたら、後はコンパイルするだけです。コンパイルの方法はtsconfig.jsonがあれば、どんな環境でも--projectオプションを使うだけです。それ以外のオプションについてはtsconfig.jsonにすべて記述されています。具体的に、tsc -p ./またはtsc -p ./tsconfig.jsonとします。

本節についてもより詳しい説明は第5章「オプションを知り己のコードを知れば百戦危うからず」を参照してください。

1.4 エディタ・IDEの環境を整えよう

Atom、Eclipse、Emacs、Vim、Visual Studio、WebStormなどさまざまなTypeScript対応のIDE・エディタが存在しています*3

TypeScriptにはlanguage serviceという仕組みがあるため、IDEを作る時にTypeScriptコンパイラ本体から変数の種類やメソッドの有無などの情報を得えられます。そのため多数のIDE・エディタでVisual Studioに勝るとも劣らないサポートを得ることができます。

language serviceに興味がある場合、https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-APIhttps://github.com/Microsoft/language-server-protocolなどを参照するとよいでしょう。

Visual Studio Codeを使ってみる

現時点での筆者のお勧めはVisual Studio Code*4です。Visual Studio Code(略称:vscode)はMicrosoftが提供している無料のエディタです。Visual Studioの名を冠していますがElectron*5を利用して組まれているマルチプラットフォームなエディタで、Windows以外でも利用できます。

筆者はMac OS XユーザですがTypeScriptを書く時はvscode一本です。

tsconfig.jsonがプロジェクト内に配置されていればvscodeはそこから必要な設定を読み込みます。つまり、設定に手間をかけることなくTypeScriptコードを書き始めることができます。