ぺーぺーSEのテックブログ

備忘録用メモサイト

RSSを購読する

TypeScript環境入門

TypeScript について環境構築からトランスパイス、設定ファイルなどをまとめる。
文法については触れない。また、前提の環境構築( npm など)は以下。

  • https://pepese.github.io/blog/mac-dev-environment/

環境構築

1
2
3
$ npm install -g typescript@latest
$ ndenv rehash$ tsc -v
Version 2.3.2

これで tsc コマンドを使って TypeScript の .ts ファイルをコンパイルできるようになる。

実行してみる

以下の greeter.ts ファイルを作成する。

1
2
3
4
5
6
7
function greeter(person) {
return "Hello, " + person;
}
var user = "pepese";
console.log(greeter(user));

以下のコマンドでコンパイル〜実行まで。

1
2
3
$ tsc greeter.ts
$ node greeter.js
Hello, pepese

設定ファイル

TypeScriptの設定ファイルは tsconfig.json
tsc コマンドのオプションで様々設定できるが、設定ファイルがあれば省略できる。

簡単な設定ファイルを作成してみて実行を確認にしてみる。
カレントディレクトリに以下の tsconfig.json を作成して $ tsc を実行しみる。

1
2
3
4
5
6
7
{
"compilerOptions": {
"baseUrl": "",
"outDir": "dist",
"sourceMap": true
}
}

dist ディレクトリが作成され、その配下に greeter.jsgreeter.js.map が作成されていることがわかる。

tsconfig.json のパラメータ

1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
  • compilerOptions
  • include / exclude
    • glob風のファイルパターンでコンパイル対象を指定できる
      • * は0文字以上の文字にマッチ(ディレクトリ区切りを除く)
      • ? は1文字以上の文字にマッチ(ディレクトリ区切りを除く)
      • **/ はサブディレクトリに再帰的にマッチ
    • デフォルトで、.ts.tsx.d.ts ファイルが対象で、 compilerOptionsalloJs パラメータががtrueの場合は .js.jsx も対象になる

compilerOptions のパラメータ

compilerOptions 配下の代表的なパラメータは以下。

パラメータ 説明
outDir コンパイルしたコードの出力先。
baseUrl コンパイル対象のファイルのベースディレクトリ。
sourceMap .map ファイルを作成するか否か。
declaration .d.ts ファイルを作成するか否か。
moduleResolution モジュール参照の解決方法を指定。 classic (デフォルト)か node参考:モジュール解決
target 出力するECMAScriptのバージョンを指定。
lib コンパイルに含めるライブラリを指定。 ES5ES6ES2015ES7ES2016ES2017DOM などを指定可能。

typeRootstypes については後述。

参考1参考2

型定義ファイルの指定

型定義ファイルの指定には、 compilerOptions 配下の typeRootstypes で設定する。
デフォルトでは、 node_modules/@types/ 配下の .d.ts ファイルが読み込まれる。
typesRoots が指定されている場合は、それに含まれるパッケージのみが対象となる。(つまり、 /node_modules/@types/ 配下は読まれない。)
types が指定された場合、一覧に指定されたパッケージのみが含まれる。( @types パッケージの自動インクルードが無効になる)
以下の場合は、 node_modules/@types/nodenode_modules/@types/lodashnode_modules/@types/express のみが含まれる。

1
2
3
4
5
{
"compilerOptions": {
"types" : ["node", "lodash", "express"]
}
}

型定義ファイルの取得と使用方法