🐕

TypeScript 型エイリアスのUnion型を使用する際の注意点

2022/05/09に公開

はじめに

TypeScriptで型定義をする際に、型エイリアスを使用することができますが
Union型/合併型を持つ場合にハマった点がありましたのでまとめておきます。

型エイリアスとは

ある型を任意の別名で宣言することができるものです。

type Person = { // Personが型エイリアス
  name: string;
  age: number;
};
const student: Person = {
  name: 'Taro Yamada',
  age: 18,
};

Union型とは

いずれかの型を取りうる型を定義できるものです。パイプ記号を使用することで複数の型を指定します。

type StringOrNumber = string | number;

ハマった点

Union型に型エイリアスを指定する場合、いずれかの型のみを取ることが許されるわけではなく、
どちらかを満たしていればよいという表現になるようでした。

type Dog = {
  name: string;
  barks: boolean;
  wags: boolean;
};
type Cat = {
  name: string;
  purrs: boolean;
};

type CatOrDog = Dog | Cat; // DogとCatのUnion型

const pet1: CatOrDog = { // OK
  name: 'Pochi',
  barks: true,
  wags: true,
  purrs: true,
};
const pet2: CatOrDog = { // OK
  name: 'Pochi',
  barks: true,
  purrs: true,
};
const pet3: CatOrDog = { // NG
  name: 'Pochi',
  barks: true,
};

pet2はCatを満たしているのでOK, barks, wagsプロパティは設定してもしなくても成り立つ。
pet3はDogもCatも満たしていないのでコンパイルエラーとなる。

purrsプロパティを設定すれば、barks, wagsプロパティを設定することはできないものと思っていたため、
pet2の存在にハマってしまいました...

参考

https://www.oreilly.co.jp/books/9784873119045/

Discussion