映射类型

当你不想重复自己时，有时一种类型需要基于另一种类型。

🌐 When you don’t want to repeat yourself, sometimes a type needs to be based on another type.

映射类型建立在索引签名的语法之上，用于声明未提前声明的属性类型：

🌐 Mapped types build on the syntax for index signatures, which are used to declare the types of properties which have not been declared ahead of time:

ts
type OnlyBoolsAndHorses = {
  [key: string]: boolean | Horse;
};
 
const conforms: OnlyBoolsAndHorses = {
  del: true,
  rodney: false,
};Try

映射类型是一种泛型类型，它使用 PropertyKey 的联合（通常通过 keyof 创建）来遍历键，从而创建一种类型：

🌐 A mapped type is a generic type which uses a union of PropertyKeys (frequently created via a keyof) to iterate through keys to create a type:

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

在这个例子中，OptionsFlags 将获取类型 Type 的所有属性，并将它们的值更改为布尔类型。

🌐 In this example, OptionsFlags will take all the properties from the type Type and change their values to be a boolean.

ts
type Features = {
  darkMode: () => void;
  newUserProfile: () => void;
};
 
type FeatureOptions = OptionsFlags<Features>;
           
type FeatureOptions = {
    darkMode: boolean;
    newUserProfile: boolean;
}Try

映射修饰符

🌐 Mapping Modifiers

在映射过程中可以应用两个额外的修饰符：readonly 和 ?，它们分别影响可变性和可选性。

🌐 There are two additional modifiers which can be applied during mapping: readonly and ? which affect mutability and optionality respectively.

你可以通过在前面加上 - 或 + 来删除或添加这些修饰符。如果你不添加前缀，则默认使用 +。

🌐 You can remove or add these modifiers by prefixing with - or +. If you don’t add a prefix, then + is assumed.

ts
// Removes 'readonly' attributes from a type's properties
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;
}Try

ts
// Removes 'optional' attributes from a type's properties
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;
}Try

通过 as 进行按键重新映射

🌐 Key Remapping via as

在 TypeScript 4.1 及更高版本中，你可以在映射类型中使用 as 子句重新映射键：

🌐 In TypeScript 4.1 and onwards, you can re-map keys in mapped types with an as clause in a mapped type:

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

你可以利用像 模板字面量类型 这样的功能，从已有的属性创建新的属性名：

🌐 You can leverage features like template literal types to create new property names from prior ones:

ts
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;
}Try

你可以通过条件类型生成 never 来过滤键：

🌐 You can filter out keys by producing never via a conditional type:

ts
// 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;
}Try

你可以对任意联合类型进行映射，不仅仅是 string | number | symbol 的联合类型，而是任何类型的联合类型：

🌐 You can map over arbitrary unions, not just unions of string | number | symbol, but unions of any type:

ts
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;
}Try

进一步探索

🌐 Further Exploration

映射类型与本类型操作部分的其他特性配合良好，例如这里有一个使用条件类型的映射类型，它会根据对象是否将属性 pii 设置为字面量 true 来返回 true 或 false：

🌐 Mapped types work well with other features in this type manipulation section, for example here is a mapped type using a conditional type which returns either a true or false depending on whether an object has the property pii set to the literal true:

ts
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;
}Try