TS速记

3 阅读3分钟

🌟 一、条件类型 + 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 方法名!

👉 namegetName
👉 agegetAge
就像批量重命名文件!


🌟 七、类型守卫: “运行时验明正身”

🔤 口诀: “if 一判知身份,in 操作认亲爹”

🧠 场景联想:

你面前站着一个人(animal: Dog | Cat),怎么知道他是谁?

  • 问:“你会汪汪叫吗?” → 'bark' in animal → 是狗!
  • 或者写个函数:isString(x) → 返回 x is string → TS 相信你!

✅ 守卫成功后,TS 就敢让你调 .bark() 了!


🌟 八、整体记忆卡片(打印可用 😄)

概念小帖士图像联想
条件类型“考试通过走左边”⚖️ 天平称类型
infer“请帮我掏出口袋里的类型”👜 掏兜动作
映射类型“抄钥匙改权限”🔑 一串钥匙
Partial“偏心只想填部分”❤️ 偏向一侧
Pick/Omit“挑选 or 扔掉”✂️ 剪刀裁剪
模板字面量“字符串拼乐高”🧱 积木拼接
类型守卫“现场验DNA”🕵️‍♂️ 侦探查案

✅ 终极建议:每天默念一遍口诀 + 动手敲一遍例子!

💬 “偏全只,挑着拣,提提不,返参见!
一边念一边写代码,不知不觉就掌握了 TS 高阶心法!


🎯 Bonus:你可以这样复习

  1. 闭眼回想口诀
  2. 白板默写 Partial, Pick, ReturnType 实现
  3. 给同事讲一遍“infer 是怎么掏类型的”

坚持一周,你会发现:TS 不再是障碍,而是你的超能力!

需要我把这些做成一张 TypeScript 高级记忆脑图(文字版) 吗?我可以帮你整理成 Markdown 结构方便保存~