初めに
TypeScript を勉強する際のメモという形で残していきます。
勉強している本の詳細まで書くつもりはないので、本格的に勉強したい人は購入をおすすめします。
https://www.amazon.co.jp/dp/4873119049/ref=cm_sw_r_tw_dp_X6WGTSCT8NW5JY3M2EAK
TypeScript の導入
mkdirやcdコマンドなどで使用したいフォルダに移動してから以下のコマンドを実行します。
npm init
npm install --save-dev typescript tslint @types/node| モジュール名 | 説明 |
|---|---|
typescript |
TypeScript |
tslint |
TypeScript の機能エラーチェック等を行う静的分析ツール |
@types/node |
Node.js のライブラリなどに型情報を付与する |
TypeScript の設定
使用するフォルダのルートディレクトリに tsconfig.json を置きます。
例として以下のような設定が挙げられます。
{
"compilerOptions": {
"lib": ["ES2015"],
"module": "CommonJS",
"outDir": "dist",
"sourceMap": true,
"strict": true,
"target": "ES2015"
},
"include": ["src"]
}| オプション | 説明 |
|---|---|
compilerOptions |
コンパイル（コンパイラ）のオプション |
include |
TS ファイルをコンパイルするフォルダ |
lib |
JS の実行環境にどんな API（ES2015 の Object.assign, DOM の document.querySelector 等） があるか |
module |
どのモジュールシステム（CommonJS, ES2015 とか）にコンパイルするか |
outDir |
生成された JS ファイルをどのフォルダに格納するか |
sourceMap |
ソースマップ（.js.map, .jsx.map）を一緒に出力するか |
strict |
不正なコードを厳格にチェックするか 有効にすると、全てのコードを適切に型付けするように強制される |
target |
TS をどの JS バージョン（ES3, ES5, ES2015 など）にコンパイルするか |
詳しい説明は以下のリンクを参照してください。
https://www.typescriptlang.org/tsconfig
TSLint の設定
TSLint の設定はtslint.jsonに記述します。
{
"defaultSeverity": "error",
"extends": ["tslint:recommended"],
"rules": {
"semicolon": false,
"trailing-comma": false
}
}詳しいルールについては以下のリンクを参照してください。
https://palantir.github.io/tslint/rules/
実行
以下のような適当な TypeScript ファイルを用意します。
console.log("Hello, TypeScript !");ターミナルで TypeScript ファイルをコンパイルして、
./node_modules/.bin/tscNode.js で実行します。
node ./dist/index.js実行出来れば以下の通りになります。
$ node ./dist/index.js
Hello, TypeScript !もし、スクリプトが実行できない場合は、以下の対処法が参考になれば幸いです。
Window10(11)時のトラブル「このシステムではスクリプトの実行が無効に…
TypeScript をコンパイルするために、
./node_modules/.bin/tscを実行すると、以下のようなエラーが出ました。なにやら、スクリプトが無効とか書いてあります。
$ ./node_modules/.bin/tsc
./node_modules/.bin/tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\*****\ts\node_modules\.bin\tsc.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ ./node_modules/.bin/tsc
+ ~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess「./nodemodules/.bin/tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\\***\ts\nodemodules.bin\tsc.ps1 を読み込むことができません。詳細については、「aboutExecutionPolicies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。」
初期状態では、PowerShell のスクリプトの実行が実行ポリシーによって許可されていないため、エラーが発生します。
解決策としては、管理者として PowerShell を開き、以下のコマンドを実行します。
PowerShell Set-ExecutionPolicy RemoteSignedその後、先ほどのターミナルで同じコマンドを実行すると、コンパイル出来ます。
./node_modules/.bin/tsc実行ポリシーを初期状態に戻すには管理者として PowerShell を開き、以下のコマンドを実行します。
PowerShell Set-ExecutionPolicy Restricted実行環境の整備
tsc
グローバルに TypeScript をインストールすると、tscコマンドで簡単にビルドできます。
npm install typescript --save -g--buildオプションでコンパイル、
tsc --build--build --cleanオプションでビルドファイルの削除が出来ます。
tsc --build --cleants-node
ts-nodeを使ってコンパイルと実行を行うことが出来ます。
npm install ts-nodeインストールが完了したら、以下のような一行のコマンドで実行出来ます。
./node_modules/.bin/ts-node src/index.ts実行出来れば以下の通りになります。
$ ./node_modules/.bin/ts-node src/index.ts
Hello, TypeScript