第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.4.2
$ echo "class Sample {}" > sample.ts
$ tsc sample.ts
$ cat sample.js
var Sample = (function () {
    function Sample() {
    }
    return Sample;
}());

なお、本書執筆時点ではnpm install -g typescriptで導入できるTypeScriptバージョンは2.4.1です。

cutting edgeな最新版コンパイラを利用したい場合はnpmにリリースされているnextタグやrcタグを使います。

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

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

プロジェクトごとにバージョンを指定する方法を次に示します。

$ npm init -y
# 省略
$ ls package.json
package.json
$ npm install --save-dev typescript
$ ./node_modules/.bin/tsc -v
Version 2.4.2

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

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

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

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
{
  // かなり長い内容のJSONが出力されます
  // もっと色々なオプションの説明が書いてあるので試してみてください
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

tsconfig.jsonはJSONですがコメントを書くことが可能*3です。

TypeScriptが出力するデフォルトの設定は一般向けの設定です。初心者がとりあえず使い始める足がかりとしては十分です。--strictがデフォルトでtrueになっているあたりにTypeScriptの強い気持ちが感じられますね。

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

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",
    "module": "commonjs",
    "lib": [
      "dom",
      "esnext",
      "esnext.asynciterable"
    ],

    /* Strict Type-Checking Options */
    "strict": true,

    /* Additional Checks */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "types": [
      "node"
    ],

    /* Experimental Options */
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    /* Other Options. tsc --init で今のところ出力されないもの */
    "noStrictGenericChecks": false,
    "forceConsistentCasingInFileNames": true,
    "traceResolution": false,
    "listFiles": false,
    "stripInternal": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": false,
    "pretty": false,
    "noEmitOnError": true
  },
  "include": [
    "code/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "code/tsc-options/types/",
    "code/tsc-options/helpers/",
    "code/at-types/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ができたら、後はtscコマンドを実行するだけです。引数無しで実行した場合、デフォルトでtsconfig.jsonを参照してコンパイルが行われます。

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

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

Visual Studio Code、Atom、WebStorm、Visual Studio、Vim、Emacs、EclipseなどTypeScript対応のIDE・エディタが数多く存在*4しています。

現時点での筆者のお勧めはVisual Studio Code*5です。Visual Studio Code（略称：vscode）はMicrosoftが提供している無料のエディタです。Visual Studioの名を冠していますがElectron*6を利用したマルチプラットフォームなエディタで、Windows以外でも利用できます。筆者はmacOSユーザですがTypeScriptを書く時はvscode一本です。

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

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

Language Serviceに興味がある場合、次の文献を参照するとよいでしょう。

• https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API
• https://github.com/Microsoft/language-server-protocol