Typescript memo

Typescript

Javascriptの世界に型システムを導入した言語。

型推論のおかげで一つの変数に型の異なるデータを宣言するとコンパイルエラーになる。

foo = 'hello world';

foo = 10; // コンパイルエラーになる

またJavascriptの機能も使えつつ、アクセス修飾子、インターフェイス、ジェネリクスも使える。

コンパイルまでの動き

Typescript
　→TypescriptソースがASTへ解析される。　※AST＝abstract syntax tree
　→ASTが型チェッカーによってチェックされる
　→ASTによってバイトコードにコンパイルされる

Javascript
　→JavascriptソースがASTへ解析される。
　→ASTによってバイトコードにコンパイルされる
　→バイトコードがランタイムによって評価される

インストール

npm install -g typescript

tscコマンドが使えるようになる。

実際にアプリ開発するにはコンパイラだけ用意しても不便なのでビルドツールの「webpack」とプラグインの「ts-loader」もインストールする。

npm install typescript ts-loader webpack webpack-cli webpack-dev-server -D

※オプションの-Dは開発時にのみ使うパッケージであることを記録する。（package.jsonに記述される）

備考：
・webpack
　…複数のjsファイルをくっつけて1つのjsファイルを作成するバンドルツール。最適化しているらしい。
・ts-loader
　…webpackのプラグイン。tscを呼び出してコンパイルしている。コンパイルされたjsファイルをwebpackに渡している。
・webpack-dev-server
　…webブラウザの変更を知らせて、ソースコードの変更を検知してwebpaackを再起動？して再描画している。
　※サーバを起動したままソースの変更を取り込んで反映させる。

最後にTypescriptコンパイラ用の設定ファイル（tsconfig.json）を作成する。

npm tun init

作成後はコンパイルするソースコードの場所を追記しておく。

{
  "include":[           //add
    "src//*"             //add
  ],                         //add
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
(省略)