公開日: 2023/05/06 @Miz_dev
複数の型を 1 つにまとめることが出来るもの。
型に名前を付けることが出来るもの。
型が長くなって見づらくなってしまう時に Type Alias として定義しておくことで後ほどのコードの見通しが良くなる。
type Foo = {
a: number;
b: string;
};
const Test: Foo = {
a: 1,
b: "test",
};
Intersection Types(交差型)は以下のように「&」で Type Alias を繋げることで複数の型をまとめることが出来る。
type Foo = {
a: number;
b: string;
};
type Bar = {
c: boolean;
};
type FooBer = Foo & Bar;
const Test: FooBer = {
a: 1,
b: "",
c: true,
};
複数の型があった場合にどれか 1 つが成立すれば OK。
「どちらか一方の型になる」という訳では無いので注意。
※もしそうであれば全ての型があった場合にエラーとなってしまうため。
Union Types(共用体型・合併型)は以下のように「|」で Type Alias を繋げることで複数の型をまとめることが出来る。
type Foo = {
a: number;
b: string;
};
type Bar = {
c: boolean;
};
type FooBer = Foo | Bar;
const Test: FooBer = {
a: 1,
b: "",
c: true,
};
以下のような場合に、例えば a を string として扱いたいとなった場合に、補完で number の方の補完も出てしまう等の不都合が出てきてしまう。
type Foo = {
a: number;
b: string;
};
type Bar = {
a: string;
b: boolean;
};
type FooBer = Foo | Bar;
const Test: FooBer = {
a: 1,
b: "",
c: true,
};
それを解決するために、以下のように「in 演算子」を用いて解決することができる。
type Foo = {
a: number;
b: string;
};
type Bar = {
a: string;
b: boolean;
};
type FooBer = Foo | Bar;
const test: FooBer = {
a: 1,
b: "",
c: true,
};
if ("b" in test) {
test.a.〇〇〇;
} else {
test.c.〇〇〇;
}
test の b は string なので、Foo の型だと推測ができる。