TypeScript 之對映型別

冴羽發表於2021-12-10
TypeScript型別

TypeScript 的官方文件早已更新，但我能找到的中文文件都還停留在比較老的版本。所以對其中新增以及修訂較多的一些章節進行了翻譯整理。

本篇翻譯整理自 TypeScript Handbook 中 「Mapped Types」 章節。

本文並不嚴格按照原文翻譯，對部分內容也做了解釋補充。

對映型別（Mapped Types）

有的時候，一個型別需要基於另外一個型別，但是你又不想拷貝一份，這個時候可以考慮使用對映型別。

對映型別建立在索引簽名的語法上，我們先回顧下索引簽名：

// 當你需要提前宣告屬性的型別時
type OnlyBoolsAndHorses = {
  [key: string]: boolean | Horse;
};
 
const conforms: OnlyBoolsAndHorses = {
  del: true,
  rodney: false,
};

而對映型別，就是使用了 PropertyKeys 聯合型別的泛型，其中 PropertyKeys 多是通過 keyof 建立，然後迴圈遍歷鍵名建立一個型別：

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

在這個例子中，OptionsFlags 會遍歷 Type 所有的屬性，然後設定為布林型別。

type FeatureFlags = {
  darkMode: () => void;
  newUserProfile: () => void;
};
 
type FeatureOptions = OptionsFlags<FeatureFlags>;
// type FeatureOptions = {
//    darkMode: boolean;
//    newUserProfile: boolean;
// }

對映修飾符（Mapping Modifiers）

在使用對映型別時，有兩個額外的修飾符可能會用到，一個是 readonly，用於設定屬性只讀，一個是 ? ，用於設定屬性可選。

你可以通過字首 - 或者 + 刪除或者新增這些修飾符，如果沒有寫字首，相當於使用了 + 字首。

// 刪除屬性中的只讀屬性
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};
 
type LockedAccount = {
  readonly id: string;
  readonly name: string;
};
 
type UnlockedAccount = CreateMutable<LockedAccount>;

// type UnlockedAccount = {
//    id: string;
//    name: string;
// }
// 刪除屬性中的可選屬性
type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property];
};
 
type MaybeUser = {
  id: string;
  name?: string;
  age?: number;
};
 
type User = Concrete<MaybeUser>;
// type User = {
//    id: string;
//    name: string;
//    age: number;
// }

通過 as 實現鍵名重新對映（Key Remapping via as）

在 TypeScript 4.1 及以後，你可以在對映型別中使用 as 語句實現鍵名重新對映：

type MappedTypeWithNewProperties<Type> = {
    [Properties in keyof Type as NewKeyType]: Type[Properties]
}

舉個例子，你可以利用「模板字面量型別」，基於之前的屬性名建立一個新屬性名：

type Getters<Type> = {
    [Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property]
};
 
interface Person {
    name: string;
    age: number;
    location: string;
}
 
type LazyPerson = Getters<Person>;

// type LazyPerson = {
//    getName: () => string;
//    getAge: () => number;
//    getLocation: () => string;
// }

你也可以利用條件型別返回一個 never 從而過濾掉某些屬性:

// Remove the 'kind' property
type RemoveKindField<Type> = {
    [Property in keyof Type as Exclude<Property, "kind">]: Type[Property]
};
 
interface Circle {
    kind: "circle";
    radius: number;
}
 
type KindlessCircle = RemoveKindField<Circle>;

// type KindlessCircle = {
//    radius: number;
// }

你還可以遍歷任何聯合型別，不僅僅是 string | number | symbol 這種聯合型別，可以是任何型別的聯合：

type EventConfig<Events extends { kind: string }> = {
    [E in Events as E["kind"]]: (event: E) => void;
}
 
type SquareEvent = { kind: "square", x: number, y: number };
type CircleEvent = { kind: "circle", radius: number };
 
type Config = EventConfig<SquareEvent | CircleEvent>
// type Config = {
//    square: (event: SquareEvent) => void;
//    circle: (event: CircleEvent) => void;
// }

深入探索（Further Exploration）

對映型別也可以跟其他的功能搭配使用，舉個例子，這是一個使用條件型別的對映型別，會根據物件是否有 pii 屬性返回 true 或者 false :

type ExtractPII<Type> = {
  [Property in keyof Type]: Type[Property] extends { pii: true } ? true : false;
};
 
type DBFields = {
  id: { format: "incrementing" };
  name: { type: string; pii: true };
};
 
type ObjectsNeedingGDPRDeletion = ExtractPII<DBFields>;
// type ObjectsNeedingGDPRDeletion = {
//    id: false;
//    name: true;
// }

TypeScript 系列

  1. TypeScript 之 基礎入門
  2. TypeScript 之 常見型別（上）
  3. TypeScript 之 常見型別（下）
  4. TypeScript 之 型別收窄
  5. TypeScript 之 函式
  6. TypeScript 之 物件型別
  7. TypeScript 之 泛型
  8. TypeScript 之 Keyof 操作符
  9. TypeScript 之 Typeof 操作符
  10. TypeScript 之 索引訪問型別
  11. TypeScript 之 條件型別

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章