データ層のTS化｜コードで実践

いちばん下から手を付ける

前のレッスンで立てた順番のとおり、まずデータ層です。作品一覧とプロフィールの中身が入っているだけで、何も import していないファイルです。もとの JavaScript は、オブジェクトの配列を export しているだけでした。

形に名前を付ける

拡張子を .ts に変えたら、最初にやるのは形の定義です。第4章で作った Work をそのまま持ってきます。

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

export const works: Work[] = [
  { id: 1, title: "プロフィールサイト", published: true },
  { id: 2, title: "自己紹介カード", published: false },
  { id: 3, title: "スキル一覧の表", published: true },
];

配列に Work[] と書いた瞬間、要素の書き間違いが全部エラーになります。

{ id: 4, titel: "下書きメモ", published: false }
// エラー Object literal may only specify known properties,
//       and 'titel' does not exist in type 'Work'.

データは手で打つものなので、こういう打ち間違いがいちばん多く、いちばん見つけにくい場所です。ここに型を通す価値は大きいです。

使う側にも型が伝わる

データに型が付くと、そのデータを触るコードにも自動で型が流れます。

const titles = works.map((work) => work.title);
// titles は string[] と推論される

works.map((work) => work.titel);
// エラー Property 'titel' does not exist on type 'Work'.

引数の work に型を書いていないのに検査が効いているのは、works が Work[] だと分かっているからです。下のファイルから型を付けていく理由が、ここに出ています。

プロフィールも同じ手順

プロフィールは配列ではなくオブジェクト 1 つですが、やることは変わりません。

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

export const profile: Profile = { name: "ゆめさく", nickname: null, workCount: 2 };

nickname を string | null にしてあるので、使う側は null の場合を考えないと先へ進めません。

手を動かす

演習では、データを受け取って公開中の作品タイトルだけを取り出す関数を移行します。Work の形を自分で定義してから、引数と戻り値に型を通してください。順番は、型を付けてから中身です。

データ層のTS化

いちばん下から手を付ける

形に名前を付ける

使う側にも型が伝わる

プロフィールも同じ手順

手を動かす

要件

入出力例

ヒント

メモ