完成と次のステップ｜基礎を学ぶ

54 レッスンで手に入ったもの

お疲れさまでした。最初のレッスンで見た、止まらないまま間違った答えを出すコードを覚えているでしょうか。あれを型で捕まえるところから始めて、いまは JavaScript のプロジェクトを 1 本まるごと移せるところまで来ました。

通ってきた道は 7 つです。型注釈、基本の型、関数の型、interface、union と型ガード、ジェネリクス、そして移行です。

持ち帰る資産

覚えた文法より、書いたコードのほうが役に立ちます。手元に残っているのは次の 3 つです。

interface Work {
  id: number;
  title: string;
  published: boolean;
}

interface Profile {
  name: string;
  nickname: string | null;
  workCount: number;
}

type LoadStatus = "loading" | "success" | "error";

Work と Profile はポートフォリオのデータの形です。LoadStatus は通信の状態です。この 3 つは次のコースでもそのまま使います。捨てずに置いておいてください。

もう 1 つ、文法ではないものも持ち帰っています。型を付けてから中身を直す、という手順です。第1章のつくる回で 1 関数に対してやり、第7章でプロジェクト全体に対してやりました。規模が変わっても順番は変わりません。

このコースで扱わなかったこと

正直に書いておきます。TypeScript には、ここで触れていない機能がまだあります。Partial や Pick といった型を加工する仕組み、keyof と typeof を型のほうで使う書き方、宣言ファイルの読み書き、tsconfig.json の細かい項目などです。

どれも、必要になったときに調べれば足ります。いま無いと困るものではありません。基礎の型が読めるようになっていれば、公式ドキュメントのページが読めるはずです。

次に進む先

まっすぐ進むなら、React実践です。TypeScript で React を書くコースで、このコースの Work と Profile と LoadStatus をそのまま持ち込みます。

最初に出てくるのが、コンポーネントの props に型を付ける話です。やることは第4章と同じで、オブジェクトの形を interface で決めて、受け取る側に付けるだけです。次に状態管理で LoadStatus の union が出てきます。第43レッスンで読んだ Promise<T> は、通信のところで実物として出てきます。

つまりこの章までの内容が、そのまま次の前提になります。

続けるための一手

コースを終えた直後にいちばん効くのは、自分のコードを 1 本移すことです。前のレッスンで選んだファイル以外に、もう 1 本選んでみてください。

型が付いたコードは、半年後の自分が読めます。書いた本人が忘れても、形だけは残っているからです。ここまで手を動かしてきた理由は、結局そこにあります。

それでは、次のコースで会いましょう。