一、什么是「映射类型」？

一句话定义：

用一个已有类型的 key，批量生成一个新类型

核心语法：

type NewType<T> = {
  [K in keyof T]: T[K]
}

📌 这里的 in 不是 JS 的 in，而是 类型层面的遍历 key

二、最基础示例（一定要会）

1️⃣ 手写 Readonly<T>

type MyReadonly<T> = {
  readonly [K in keyof T]: T[K]
}

等价于 TS 内置的：

Readonly<T>

2️⃣ 手写 Partial<T>

type MyPartial<T> = {
  [K in keyof T]?: T[K]
}

3️⃣ 手写 Required<T>

type MyRequired<T> = {
  [K in keyof T]-?: T[K]
}

📌 -? 表示 移除可选修饰符

三、映射类型中的「修饰符」

修饰符一览

修饰符	含义
readonly	只读
?	可选
-readonly	移除只读
-?	移除可选

示例：去掉 readonly

type Mutable<T> = {
  -readonly [K in keyof T]: T[K]
}

四、映射 + 条件判断（进阶）

1️⃣ 根据 key 过滤字段（核心技巧）

type FilterString<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K]
}

type User = {
  id: number
  name: string
  age: number
}

type StringProps = FilterString<User>
// { name: string }

📌 as 在映射类型里可以改 key

2️⃣ key 重命名（Vue / React 源码常见）

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
}

type State = {
  count: number
  name: string
}

结果：

{
  getCount: () => number
  getName: () => string
}

五、in 的本质理解（非常重要）

[K in keyof T]

等价于：

K = 'a' | 'b' | 'c'

👉 TS 会对 联合类型自动展开

type Keys = 'a' | 'b'

type Obj = {
  [K in Keys]: number
}
// { a: number; b: number }

六、真实前端场景

1️⃣ 表单校验规则

type Form = {
  username: string
  password: string
}

type Rules<T> = {
  [K in keyof T]: {
    required?: boolean
    message?: string
  }
}

2️⃣ Vue props 默认值

type Props = {
  size: string
  disabled: boolean
}

type DefaultProps = {
  [K in keyof Props]?: Props[K]
}

3️⃣ API 状态映射

type Api = {
  getUser: () => void
  getList: () => void
}

type LoadingState<T> = {
  [K in keyof T]: boolean
}

七、常见误区（面试高频）

❌ in 只能用在类型里

[K in arr] // ❌

❌ 忘记 keyof

[K in T] // ❌
[K in keyof T] // ✅

❌ 以为 in 是运行时

// 映射类型不会生成 JS 代码

八、映射类型 = TS 工具类型的底层

工具类型	底层
Partial	in + ?
Required	in + -?
Readonly	in + readonly
Pick	in + 条件
Record	in

九、记忆公式 🧠

• keyof：拿 key
• in：遍历 key
• as：改 key
• extends：筛 key