ryokatsu.dev

【書評】プログラミングTypeScript 〜第1,2章〜

O’Reillyから発売されている「プログラミングTypeScript」の書評。

https://www.oreilly.co.jp/books/9784873119045/

1章　イントロダクション

  • JavaScriptの問題点はバグに気づきにくいことになる。
  • プログラムの実行時に、バグに気づくことになる。
  • TypeScriptは、それより前にエラーを検知できる（つまりテキストエディタで開発中に教えてくれる）

2章　TypeScript:全体像

コンパイラー

ほとんどのプラグラムのコードは、以下のように手順でコンパイルされる

  1. プログラムが AST（抽象構文木）へと解析される
  2. AST がバイトコードにコンパイルされる
  3. バイトコードがランライムによって評価される

TypeScriptは、バイトコードへ直接変換するのではなく JavaScriptへ変換する。

  • 実際にはASTに生成したあとで、TSCがコードの型チェックを行う。

TS→JSへのコンパイルの流れは以下になる。

  1. TypeScriptソース→TypeScript AST
  2. ASTが型チェッカーによってチェックされる
  3. TypeScript AST →JavaScriptソース
  4. JavaScriptソース → JavaScript AST
  5. AST →バイトコード
  6. バイトコードがランタイムによって評価される

※1-3は、TSCによって行われれる。

※4-6は、JSのブラウザエンジンによって実行される。

型チェック

型をチェックする方法として、明示的に型を宣言する方法と、いい感じに型を推論してくれる方法と2種類ある。

// 明示的に宣言（アノテーション）
let a: number = 1 // aはnumberです
let b: string = 'hello' // bはstringです
let c: boolean[] = [true, false] // cはbooleanの配列です

// 型推論
let a = 1 // aはnumberです
let b = 'hello' // bはstringです
let c = [true, false] // cはbooleanの配列です
  • 明示的に型を宣言するよりTS側でできるだけ推論してくれる方がよいとされている。

tslintは非推奨になっているので使わない。（eslintを使う）

tsconfig.json

ルートディレクトリに必ず、tsconfig.jsonが存在する。どういう設定でTypeScriptプロジェクトを扱うかを記述した設定ファイル

以下は最低限な設定

{
  "compilerOptions": {
    "lib": ["es2015"],
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": [
    "src"
  ]
}
  • JS→TSからの移行をする際はanyを許可して、慣れてきたら厳格にしていくとよい。
  • configができたらindex.tsを作成してtscまたは、./node_modules/.bin/tscを実行。

tsconfigのオプションは公式サイトに乗っている。

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

以下のQiitaも参考に。

https://qiita.com/ryokkkke/items/390647a7c26933940470