interface
オブジェクトの形に名前を付ける
第2章では、オブジェクトの形をその場に直接書きました。
TypeScript
const work: { id: number; title: string; published: boolean } = {
id: 1,
title: "プロフィールサイト",
published: true,
};読めますが、同じ形を使う場所が増えるたびに、この長い注釈を書き写すことになります。interface を使うと、形に名前を付けて何度でも呼び出せます。
TypeScript
interface Work {
id: number;
title: string;
published: boolean;
}
const work: Work = {
id: 1,
title: "プロフィールサイト",
published: true,
};interface の中はカンマではなくセミコロンで区切ります。改行だけでも通りますが、セミコロンを付ける形に慣れておくと読みやすくなります。
契約なので、過不足があると止まる
interface は「この形であること」の約束です。足りなくても、余っていてもエラーになります。
TypeScript
const a: Work = { id: 2, title: "自己紹介カード" };
// エラー Property 'published' is missing in type ...
const b: Work = { id: 3, title: "スキル一覧の表", published: false, tag: "HTML" };
// エラー Object literal may only specify known properties, and 'tag' does not exist in type 'Work'.余分なプロパティまで止めてくれるのが大事なところです。tag を足したつもりが Work を使う全員に影響する、という事故を先に防げます。
関数の引数に使う
いちばん効くのは関数の引数です。
TypeScript
function workTitle(work: Work): string {
return work.title;
}こう書くと workTitle は Work の形をしたオブジェクトしか受け取りません。中で work.titel と打ち間違えれば、その場で指摘されます。
この Work は、この先ずっと使い続ける型です。第4章の残りで少しずつ育てて、React のコースまでそのまま持っていきます。だからプロパティ名は、途中で気分によって変えないでください。
手を動かす
演習では Work を自分で定義し、それを引数に取る関数を書きます。プロパティ名は上の 3 つをそのまま使ってください。
要件
Workinterface をidtitlepublishedの 3 プロパティで定義するworkLabelの引数にWork型を付けるpublishedが true なら（公開中）、false なら（下書き）を末尾に付ける
入出力例
workLabel({"id":1,"published":true,"title":"プロフィールサイト"}) → "1. プロフィールサイト（公開中）"
workLabel({"id":2,"published":false,"title":"自己紹介カード"}) → "2. 自己紹介カード（下書き）"
workLabel({"id":3,"published":true,"title":"スキル一覧の表"}) → "3. スキル一覧の表（公開中）"ヒント
編集 ゆめさく編集部