TypeScript

オブジェクトに型を書く

1. 05オブジェクトに型をつけるオブジェクトの中にどんな名前の値が入るかまで書いて、打ちまちがえをその場で見つけよう。5枚 · 13問問題へ

形に名前をつける

1. 06型に名前をつけるtype Hito = { ... }; と書いて形に名前をつけ、同じ型を何度も書かずに済ませよう。5枚 · 13問問題へ
2. 07interface で形を宣言するinterface Hito { ... } という、オブジェクトの形を宣言するもう1つの書き方を覚えよう。6枚 · 13問問題へ

細かいところまで決める

1. 08省略できる項目と変えない項目? で「無いかもしれない項目」を、readonly で「あとから変えない項目」を宣言しよう。6枚 · 13問問題へ
2. 09オブジェクトの配列Shouhin[] と書いて、同じ形のオブジェクトを並べたデータを型どおりに扱おう。6枚 · 13問問題へ

もう一歩ふみこむ

1. 10形が同じなら通る型が合うかは名前ではなく形で決まる。Hito と名乗っていないオブジェクトでも通るよ。6枚 · 13問問題へ
2. 11キーの名前が決まっていないとき{ [key: string]: number } と書いて、キーが動かすまで分からないオブジェクトに型をつけよう。6枚 · 13問問題へ
3. 12変えられない配列readonly string[] と書いて、読むだけの配列だと宣言しよう。書きかえる事故が型で止まるよ。5枚 · 13問問題へ

どれか1つの型を書く

1. 13どちらの型でもいいstring | number のように | でつないで、「どちらもありうる」を型に書こう。5枚 · 13問問題へ
2. 14決まった値だけを許す"あか" | "あお" のように値そのものを型にして、打ちまちがえをその場ではじこう。5枚 · 13問問題へ

使う前にたしかめる

1. 15使う前にたしかめるif (typeof x === "string") で絞りこんで、その中では片方の型として使おう。5枚 · 13問問題へ
2. 16any を避けて unknown を使うany は検査を止めてしまう。中身が分からない値は unknown で受けて、確かめてから使おう。5枚 · 13問問題へ

オブジェクトを見分ける

1. 17目印で見分けるユニオン共通の目印になるプロパティを持たせて、オブジェクトどうしのユニオンを if で見分けよう。5枚 · 13問問題へ

いろいろな書き方に型をつける

1. 18アロー関数に型をつける=> の形でも、引数と戻り値に型を書く場所は function のときと同じだよ。5枚 · 13問問題へ
2. 19省略できる引数? で渡さなくてもいい引数を作り、省略されたときのことまで書き切ろう。5枚 · 13問問題へ

関数そのものを受けわたす

1. 20関数そのものを受けわたす関数の型は (n: number) => string と書く。かっこの中が引数、矢印の右が戻り値だよ。5枚 · 13問問題へ
2. 21配列メソッドと型推論map や filter に渡す関数の引数は、配列の型から決まるので書かなくていいよ。6枚 · 13問問題へ

フィールドに型を書く

1. 22クラスのフィールドに型を書くクラスが持つものを先に宣言して、this. のまわりの取りちがえをその場で見つけよう。5枚 · 13問問題へ
2. 23private と readonly で守る外から触れる範囲と変えられる時期をクラスに書いて、うっかりの書きかえを止めよう。5枚 · 13問問題へ

受けつぐ・約束する

1. 24受けついだクラスに型をつけるextends と super に型をつけて、上書きしたつもりの取りちがえを見つけよう。5枚 · 13問問題へ
2. 25interface を実装するクラスに implements と書いて「この形を満たす」と約束し、書き忘れをその場で見つけよう。5枚 · 13問問題へ

短く書く

1. 26フィールド宣言を省く書き方constructor の引数に private を付けて、フィールドの宣言と代入をまとめて済ませよう。5枚 · 13問問題へ

山かっこを読む・書く

1. 27山かっこを読むArray<string> の山かっこを読めるようになって、string[] と同じものだと分かろう。5枚 · 13問問題へ
2. 28型引数を書く関数関数名のうしろに <T> と書いて、どんな型の配列にも使える関数を1つだけ作ろう。5枚 · 13問問題へ

型をファイルの外へ渡す

1. 29型をファイルの外へ渡すexport type で型を出して、import type で受け取る。型もファイルをまたいで使い回そう。6枚 · 13問問題へ

この先で出会う書き方

1. 30この先で出会う書き方このコースでは扱わない5つの書き方を、読めるだけのぞいておこう。6枚 · 13問問題へ

分割代入と残余引数

1. 31分割代入に型をつけるオブジェクトや配列を分解して受け取るとき、「中身の型」をまとめて宣言しよう。5枚 · 13問問題へ
2. 32残余引数に型をつける...scores: number[] のように、「残りぜんぶ」を受け取る引数にも型を書こう。6枚 · 13問問題へ

Map と Set

1. 33Map と Set に型をつけるMap<string, number> と Set<string> — 山かっこを自分で書いてみよう。6枚 · 13問問題へ

Promise に型をつける

1. 34Promise と async に型をつけるasync 関数の戻り値は Promise<T>。待った結果の型を山かっこに書こう。3枚 · 13問問題へ

レスポンスの型を定義する

1. 35API レスポンスの型を定義するサーバーから来るデータの「形」を interface で書こう。打ちまちがいがその場で分かる。3枚 · 13問問題へ

unknown で安全に受け取る

1. 36unknown で受け取って絞り込む「何が来るか分からない」データは unknown で受けて、型ガードで確かめてから使う。3枚 · 13問問題へ

4状態を型で書く

1. 374つの状態を型で書く通信中・成功・空・失敗。画面が取りうる4つの状態をタグ付きユニオンで設計しよう。3枚 · 13問問題へ