【TypeScript】union型を判別する方法
TypeScript

【TypeScript】union型を判別する方法

作成日:2021年08月08日
更新日:2021年08月08日

例えば、料理が出来上がる速さに関する union 型があったとします。

ts
interface PersonCooking {
manualSpeed: number;
}
interface MachineCooking {
autoSpeed: number;
}
type Cooking = PersonCooking | MachineCooking;

もつ煮込みうどんの出来上がる速さをconsole.logで表示したいので、以下の関数を作りました。

ts
function cookingSpeed(cooking: Cooking) {
console.log(
"もつ煮込みうどんは、" + cooking.manualSpeed + "分で出来上がります。"
);
}

確認してみると、

image2

エラーが発生し、『プロパティ 'manualSpeed' は型 'Cooking' に存在しません。プロパティ 'manualSpeed' は型 'MachineCooking' に存在しません。』と指摘されました。

union 型を判別したい場合、まずそれぞれの型にプロパティを設定します。

今回は、手作りで料理する場合と機械で料理する場合なので、それぞれプロパティをpersonmachineにしました。

ts
interface PersonCooking {
type: "person";
manualSpeed: number;
}
interface MachineCooking {
type: "machine";
autoSpeed: number;
}

関数の中に if 分を入力し、cooking の型を指定します。

ts
function cookingSpeed(cooking: Cooking) {
if (cooking.type === "person") {
console.log(
"もつ煮込みうどんは、" + cooking.manualSpeed + "分で作ります。"
);
} else {
console.log(
"もつ煮込みうどんは、" + cooking.autoSpeed + "分で作ります。機械ですが。"
);
}
}

確認すると、

image3

エラーがなくなりました。

© 2024あずきぱんウェブスタジオ