省略可能なプロパティ
あってもなくてもよい項目
作品には公開先の URL が付くことがあります。ただし下書きの作品にはまだ URL がありません。
前回の Work にそのまま url を足すと、URL の無い作品が作れなくなります。
TypeScript
interface Work {
id: number;
title: string;
published: boolean;
url: string;
}
const draft: Work = { id: 2, title: "自己紹介カード", published: false };
// エラー Property 'url' is missing in type ...プロパティ名の後ろに ? を付けると、省略してよいという意味になります。
TypeScript
interface Work {
id: number;
title: string;
published: boolean;
url?: string;
}
const draft: Work = { id: 2, title: "自己紹介カード", published: false };
const live: Work = {
id: 1,
title: "プロフィールサイト",
published: true,
url: "https://example.com/portfolio",
};読むときは undefined を考える
? を付けた瞬間、そのプロパティの型は string ではなく string | undefined になります。無いかもしれない値なので、そのまま使うと止められます。
TypeScript
function domainOf(work: Work): string {
return work.url.replace("https://", "");
// エラー 'work.url' is possibly 'undefined'.
}先に有無を確かめれば通ります。
TypeScript
function domainOf(work: Work): string {
if (work.url === undefined) {
return "未公開";
}
return work.url.replace("https://", "");
}if を抜けた後ろでは work.url は string として扱われます。TypeScript が分岐を読んで型を絞り込んでくれるからです。この絞り込みは第5章の主役になります。
? を付ける基準
省略できるのは「無いことが正常な項目」だけです。title が無い作品はデータの壊れなので ? を付けてはいけません。? を安易に増やすと、読む側が毎回 undefined を確かめる羽目になります。
手を動かす
演習では Work に url? を足し、URL の有無で表示を変える関数を書きます。
要件
Workにurlを省略可能なプロパティとして足す- URL があるときは
タイトル - URLを返す - URL が無いときは
タイトル - リンクはまだありませんを返す
入出力例
workLink({"id":1,"published":true,"title":"プロフィールサイト","url":"https://example.com/portfolio"}) → "プロフィールサイト - https://example.com/portfolio"
workLink({"id":2,"published":false,"title":"自己紹介カード"}) → "自己紹介カード - リンクはまだありません"
workLink({"id":3,"published":true,"title":"スキル一覧の表"}) → "スキル一覧の表 - リンクはまだありません"ヒント
編集 ゆめさく編集部