rhanda | 元銀行員Web系エンジニアの日記

実務未経験からWeb系受託開発企業に転職したひよっこエンジニアが覚えたことや日々の感情を残すブログ

『プログラミングTypeScript』読みました

構成

1章 イントロダクション
2章 TypeScript:全体像
3章 型について
4章 関数
5章 クラスとインターフェース
6章 高度な型
7章 エラー処理
8章 非同期プログラミングと並行、並列処理
9章 フロントエンドとバックエンドのフレームワーク
10章 名前空間とモジュール
11章 JavaScriptとの相互運用
12章 TypeScriptのビルドと実行
13章 終わりに

感想

TypeScriptの概要や用語、型が安全になるとどう有益なのかが説明されていて勉強になりました。
全体としては詳細な説明やコードの例が割合多く掲載されていて、今後書くときにリファレンスとして使うことも多そうだと感じました。

メモ

  • TypeScriptは、よくあるミスをチェックすることでプログラムをより安全にする。
  • ここでいう安全とは型安全性のことを指し、「型を使ってプログラムが不正なことをしないように防ぐこと」を意味する。
  • TSC(TypeScriptコンパイラー) は、バイトコードではなく JavaScriptコードへコンパイルする
  • TypeScriptは、構文に関するエラーと型に関するエラーをコンパイル時にスローする。実際にはそれらのエラーはコードエディターの中で入力するとすぐに表示される。
  • 実行時ではなくコンパイル時にエラーが出るため、ミスに気づいて修正するフィードバックのループがスピードアップする
  • 全てのものの型がわかっている時に最も効果を発揮するが、全てわかっている必要はない
    • しかしコードベース移行の真っ最中とかでなければ100%を目指すべき
  • 型が何であるかを明示的にTypeScriptに伝えるにはアノテーションを使う。アノテーションは「値: 型」という形式をとる。
let a: number = 1
let b: string = 'hello'
let c: boolean[] = [true, false] 

エイリアス

  • 変数宣言(let, const, var)を使って値の別名(エイリアス)となる変数を宣言できるのと同様に、ある方を指し示す型エイリアスを宣言することができる。
type Age = number

type Person = {
  name: string
  age: Age
}
// Ageはただのnumberだが、これによってPersonという形状の定義が理解しやすくなるメリットがある。

タプル

  • 配列のサブタイプ(派生型)
  • タプルは固定調の配列を型付けするための特別な方法で、その配列の各インデックスでの値は特定の既知の型を持つ。
  • 他の多くの型と違い、タプルを宣言する時には明示的に型付けする必要がある。それはJavaScriptにおけるタプルと配列の構文は同じであり(いずれも角括弧を使う)、TypeScriptには角括弧から配列の方を推論するためのルールが既に存在するため。
// 名前・名字・生まれ年のタプル 
let b: [string, string, number] = ['taro', 'yamada', 1995]
  • タプルは省略可能な要素や、可変長の要素もサポートしている。

呼び出しシグネチャ

  • 関数の型についての構文、型シグネチャとも呼ばれる。
  • 型レベルのコードだけを含み、値はなし。

(a: number, b: number) ⇒ number

// function greet(name: string)
type Greet = (name: string) => string

オーバーロードされた関数

  • 複数の呼び出しシグネチャを持つ関数
  • JavaScriptは動的な言語であるため、特定の関数を呼び出すために複数の方法が存在するのがよくあるパターンで、出力される方が入力される引数の方によって変わることもある
  • TypeScriptはこのダイナミズムを静的な型システムを使って具現化する
  • ブラウザのDOM APIの表現にはオーバーロードが使われがち
type Reserve = {
  (from: Date, to: Date, destination: string): Reservation
  (from: Date, destination: string): Reservation
}

let reserve: Reserve = (
  from: Date,
  toOrDestination: Date | string,
  destination?: string
) => {
  // ...
}

インターフェース - 型エイリアスと同様に、型に名前をつけるための方法