TypeScript 映射类型详情

前言:

typescript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。

本篇翻译整理自 typescript handbook 中 「mapped types」 章节。

本文并不严格按照原文翻译，对部分内容也做了解释补充。

1.映射类型（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;
// }

2.映射修饰符（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;
// }

3.通过 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;
// }

4.深入探索（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;
// }