🌟 一、条件类型 + infer: “如果能装下,就倒出来”
🔤 口诀: “extends 判断像考试,infer 提取像掏兜”
✅ 记忆点:
T extends U ? X : Y→ “如果 T 能被 U 接受(兼容),就选 X”infer R→ 就像说:“请推断出这个位置的类型,并给我起个名字 R”
🧠 联想:
想象一个漏斗(函数):
输入一堆东西(类型),TS 说:“你是不是 string?” → 是?走左边;否?走右边。
中间用 infer R 就像在管道里设了个探测器:“告诉我你到底是什么类型!”
📌 应用场景:
type Return<T> = T extends (...args: any[]) => infer R ? R : never;
👉 “如果是函数,请把它的返回值 infer 出来叫 R”
🌟 二、映射类型: “抄作业改权限”
🔤 口诀: “遍历 key 改属性,+? readonly 最常见”
✅ 记忆点:
[K in keyof T]→ “抄 T 的所有钥匙(key)”?:→ 可选(加个问号变怂:“可不可以不填?”)readonly→ 加只读(贴个封条:“禁止修改!”)
🧠 类比:
把对象看成一间房子,每个属性是一扇门。
映射类型就是:拿着原户型图(T),重新装修一遍!
📌 示例联想:
type Partial<T> = { [K in keyof T]?: T[K] };
👉 “全屋改造计划:每扇门都改成可开可不开(可选)”
🌟 三、工具类型全家桶: “偏全只挑拣,提提不返参”
🔤 口诀: “偏全只,挑着拣;提提不,返参见”
| 工具 | 含义 | 联想 |
|---|---|---|
Partial<T> | 部分 | “偏心”——只想要一部分 |
Required<T> | 必须 | “全都要!” |
Readonly<T> | 只读 | “只看不许动” |
Pick<T,K> | 挑选 | “挑我喜欢的” |
Omit<T,K> | 忽略 | “眼不见为净” |
Extract<T,U> | 提取 | “提取精华” |
Exclude<T,U> | 排除 | “排除异己” |
NonNullable<T> | 非空 | “提掉 null 和 undefined” |
ReturnType<T> | 返回值 | “返现红包” |
Parameters<T> | 参数 | “参团人数” |
🎵 顺口溜背诵:
偏全只,挑着拣,
提提不,返参见。
extends 判断走两边,
infer 一出见真颜!
🌟 四、模板字面量类型: “字符串拼图游戏”
🔤 口诀: “反引号拼类型,大小写也能玩”
🧠 想象你在做乐高:
'small' | 'large'是底座'red' | 'blue'是上块- 用
-连接:` `${Size}-${Color}` `→ 自动组合所有可能
📌 示例:
type Class = `text-${'red' | 'green'}`
// → "text-red" | "text-green"
👉 就像 CSS class 名自动补全!
🌟 五、递归与深类型: “套娃警告!”
🔤 口诀: “类型套娃层层叠,小心爆栈要收敛”
🧠 联想俄罗斯套娃:
- 每打开一层,里面还是同样的结构(对象中有对象)
- 写
DeepPartial<T>就像给每个娃娃都贴上“可选标签”
📌 示例:
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]
};
👉 “遇到对象继续拆,不是对象就停下”
🌟 六、Key Remapping: “改名大师”
🔤 口诀: “as 一下换新名,首字母大写更精神”
[Key in keyof T as `get${Capitalize<Key & string>}`]
🧠 联想程序员强迫症:
所有字段都要变成 getter 方法名!
👉 name → getName
👉 age → getAge
就像批量重命名文件!
🌟 七、类型守卫: “运行时验明正身”
🔤 口诀: “if 一判知身份,in 操作认亲爹”
🧠 场景联想:
你面前站着一个人(animal: Dog | Cat),怎么知道他是谁?
- 问:“你会汪汪叫吗?” →
'bark' in animal→ 是狗! - 或者写个函数:
isString(x)→ 返回x is string→ TS 相信你!
✅ 守卫成功后,TS 就敢让你调 .bark() 了!
🌟 八、整体记忆卡片(打印可用 😄)
| 概念 | 小帖士 | 图像联想 |
|---|---|---|
| 条件类型 | “考试通过走左边” | ⚖️ 天平称类型 |
| infer | “请帮我掏出口袋里的类型” | 👜 掏兜动作 |
| 映射类型 | “抄钥匙改权限” | 🔑 一串钥匙 |
| Partial | “偏心只想填部分” | ❤️ 偏向一侧 |
| Pick/Omit | “挑选 or 扔掉” | ✂️ 剪刀裁剪 |
| 模板字面量 | “字符串拼乐高” | 🧱 积木拼接 |
| 类型守卫 | “现场验DNA” | 🕵️♂️ 侦探查案 |
✅ 终极建议:每天默念一遍口诀 + 动手敲一遍例子!
💬 “偏全只,挑着拣,提提不,返参见! ”
一边念一边写代码,不知不觉就掌握了 TS 高阶心法!
🎯 Bonus:你可以这样复习:
- 闭眼回想口诀
- 白板默写
Partial,Pick,ReturnType实现 - 给同事讲一遍“infer 是怎么掏类型的”
坚持一周,你会发现:TS 不再是障碍,而是你的超能力!
需要我把这些做成一张 TypeScript 高级记忆脑图(文字版) 吗?我可以帮你整理成 Markdown 结构方便保存~