なぜ型を付けるか
JavaScript だけでも画面は作れます。型を付けると、打ち間違いや null の扱い忘れを、動かす前に見つけられます。フロントエンドの基礎「TypeScript」の続きです。
型は、動くときには消える
型の基本
変数や引数の後ろに「: string」のように書く型を、型注釈と言います。まず押さえるのは、文字・数・真偽・配列・オブジェクトと、null。any と unknown の違いも、ここで覚えます。
型を当てる エディタで、名前にマウスを乗せると出る型です
よく使う形
名前を付けた型、省略できる項目、「どれか 1 つ」を表すユニオン型、中身の型を後から決めるジェネリクスです。
状態を 1 つ足すと、直し忘れが分かる
非同期（Promise・async/await・fetch）
サーバーの返事を待つ間も、画面は止まりません。その代わり、コードは書いた順に動くとは限りません。
順番を当てる console.log が出る順に、ボタンを押してください
Laravel の API の返事に型を付ける
勤怠の打刻の一覧を出す画面の例です（作り物）。型は「この形で届くはず」という約束で、届いた中身を確かめてはくれません。項目を押すと、3 つの欄の同じ所が光ります。
よくある型のエラーと読み方
tsc のエラーは「どこで・何の番号で・何が起きたか」の 3 つでできています。決まった言い回しを覚えると、英語でもすばやく読めます。
エラーの文の部分 押すと説明が出ます
よく出る言い回し
読む練習 考え方のヒント
AI 時代AI が書く型と非同期
AI は、型も非同期もすらすら書きます。ただ、エラーを消すことと、正しく直すことは別です。差分のどこを見るかを決めておきます。
チェックリスト
TypeScript を書いたら、確かめたものにチェックを付けてください（この端末にだけ保存されます）。考え方のヒント