この記事は何？
TypeScriptとは何か、何がいいのかを伝えようと頑張った記事の第２弾です！
今回は、型を組み合わせて新たな型を生成する、
Unionについて説明していきます。
@ 過去の記事、続編👇も合わせて御覧ください！
1. JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~
2. TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~ ← この記事
3. TypeScriptをなんとなく理解するための記事③ ~汎用的な型を作成する: Generics~
4. TypeScriptをなんとなく理解するための記事④ ~構造型~
@ TypeScriptがなんとなく理解できたら、是非インストールして、触ってみてください！
👉 【画像で説明】シンプルにTypeScriptを導入して使う方法
型の組み合わせとは？
TypeScriptでは、型と型を組み合わせて新しく型を作り上げることが出来ます。
この型の組み合わせの方法は２つあります。
１つは、Union、もう１つは、Genericsです。
この記事では、Unionの概要について説明していきます。
※Genericsについては次回の記事で説明しています。
Unionによる型の作成
unionの基本
まずは、Unioinを使わずに型を作ってみます。
型はtypeを利用して、以下のように作成します。
type Fish = "sanma";
新しくFish型を作成しました。
このFish型は、文字列(string)のsanmaのみを許容する型です。
そのため、この型を使って以下のように、定数lunchを定義できます。
type Fish = "sanma";
const lunch: Fish = "sanma";
lunchはFish型なので、"sanma"のみ許容します。
つまり、ランチにはサンマしか食べることが出来ません。
実際にlunchにサンマ以外を定義しようとすると...
const lunch: Fish = "iwana"; // タイプ '"iwana"'はタイプ '"sanma"'に割り当てることができません。ts（2322）
Fish型のlunchには、"iwana"を定義することが出来ませんでした。
ランチには、サンマもイワナも食べるので、どちらも許容したいです。
そこで、Unionを利用します。Unionは|を利用して次のように記述します。
type Fish = "sanma" | "iwana";
const lunch: Fish = "iwana";
このように|を利用してFish型に"sanma", "iwana"に絞る事ができます。
ちなみに、"sanma", "iwana"以外は許容されません。
type Fish = "sanma" | "iwana";
const lunch: Fish = "iwana";
const dinner: Fish = "sanma";
const breakfirst: Fish = "saba"; // タイプ '"saba"'はタイプ 'Fish'に割り当てることができません。
もちろん数値も扱うことができます。
type AndroidVersion = 9 | 10 | 11;
const myAndroidOsVersion: AndroidVersion = 11;
ちょっと発展した型の作成
以上では、明確な文字や数値に限定して、型を作成しました。
ここまで厳格にしなくても、「文字列stringはOK!」「文字列の入った配列string[]はOK!」ということも出来ます。
具体的には、以下のような記述方法です。
type Food = string | string[];
const branch: Food = 'cake';
const nightMeal: Food = ['ramen', 'onigiri', 'potechi'];
const theLastSupper: Food = ['ramen', 'onigiri', 1498]; // タイプ「number」はタイプ「string」に割り当てることができません。ts（2322）
レオナルド・ダ・ヴィンチ作の最後の晩餐（theLastSupper）は、1498年に完成しましたが、これは数値であり、文字列でないのでエラーが起きます。
ちなみに、このようなUnionで型を定義した際に便利なのが型のチェックです。
以下のように、型のチェックをすることができます。
| タイプ | 述語 |
|---|---|
| 文字列 | typeof s === "string" |
| 数値 | typeof n === "number" |
| ブール値 | typeof b === "boolean" |
| 未定義 | typeof undefined === "undefined" |
| 関数 | typeof f === "function" |
| 配列 | Array.isArray(a) |
これを使って、型によって条件分岐をすることが出来ます。
const healthCheck = (food: Food): string => {
if (typeof food === "string") {
return `it's OK`;
} else {
return `it's Bad`;
}
};
console.log(healthCheck(["ramen", "onigiri", "potechi"])); // it's Bad
おわりに
今回はUnionを使って、型を結合してみました！
型を組み合わせて、自分だけのユニークな型を作ってみましょう！
※ 「そういえば、前回、Interfaceが出てきたけどtypeと何が違うの...?」と思った方もいるかもしれません。今後、この違いに関しても書く予定ではあります。が、既に記事があるので一旦こちらにご案内します...! → TypeScript の Interface と Type Alias の違い
Next: TypeScriptをなんとなく理解するための記事③ ~汎用的な型を作成する: Generics~
@ ハンズオンも書いたので、さっそく使ってみたい人は是非！
👉【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり