Skip to main content

[TS] Unions and Intersection Types

在 TypeScript 中:

  • 聯集(Unions)指的是能夠符合其中一種型別即可
  • 交集(Intersection)則是要能夠同時符合兩種型別,也就是 A type 中有的屬性和 B type 中的屬性都要同時存在
type Circle = {
color: string;
radius: number;
};
type Rectangle = {
color: string;
width: number;
height: number;
};
// 只需符合 Circle 的屬性或 Rectangle 的屬性即可
const foo: Circle | Rectangle = {
color: 'red',
radius: 15,
height: 20,
};
// 需要同時帶有 Circle 和 Rectangle 中的屬性(缺一不可)
const bar: Circle & Rectangle = {
color: 'red',
radius: 15,
width: 30,
height: 20,
};

Union Types#

使用 Union 來定義伺服器回應的狀態#

這樣就不需要使用 code?: numberresponse?: {...} 這樣的寫法,可以明確知道不同的通訊狀態下需要必備的欄位有哪些:

// https://www.staging-typescript.org/docs/handbook/unions-and-intersections.html#discriminating-unions
type NetworkLoadingState = {
state: 'loading';
};
type NetworkFailedState = {
state: 'failed';
code: number;
};
type NetworkSuccessState = {
state: 'success';
response: {
title: string;
duration: number;
summary: string;
};
};
// Create a type which represents only one of the above types
// but you aren't sure which it is yet.
type NetworkState = NetworkLoadingState | NetworkFailedState | NetworkSuccessState;

Intersection Types#

使用 Intersection Types 為每一個 response 加上 Error Handling:

interface ErrorHandling {
success: boolean;
error?: { message: string };
}
interface ArtworksData {
artworks: { title: string }[];
}
interface ArtistsData {
artists: { name: string }[];
}
type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;
Last updated on