contextual 上下文类型
最后更新：2026-10-22
contextual 上下文类型
上下文类型：当函数字面量出现在"已知类型的位置"（变量注解、数组方法回调、事件处理器），TS 会反推它的参数类型——无需手写注解。map((o) => o.id) 里的 o 之所以有类型，不是推断自函数本身，而是来自数组元素类型这个"上下文"。
| 分组 | 函数与类 |
|---|---|
| 类型 | 语法 |
| 严格模式 | 不需要 |
ℹ️ 说明 编辑器将 TypeScript 转译为 JavaScript 后运行（不做类型检查）；类型检查结果见示例 Output。
📝 语法
const orders: Order[] = [];
// 回调参数 o 从 orders 的元素类型获得上下文类型 Order
const summaries = orders.map((o) => `#${o.id}: ${o.total}`);
// 变量注解同样提供上下文
type ClickHandler = (event: { x: number; y: number }) => void;
const onClick: ClickHandler = (event) => console.log(event.x, event.y);⚙️ 参数
| const x: T = ... | 触发上下文推断的场景：变量/参数的类型注解、数组元素、函数实参（对应形参类型）、return 表达式（对着声明的返回类型） |
|---|---|
| (x) => ... | 无注解时由上下文提供类型；写注解则必须与上下文兼容，否则报错 |
返回值：return 表达式同样受上下文约束：声明的返回类型会反向检查每个 return，提前抓住"少 return 一个分支"这类错误。
▶ 示例
修改下面的代码，点击试一试查看转译运行结果：
输出：
#101: 250, #102: 90, #103: 480
2
click @ 12,34
（转译后运行输出；在回调里写 o.pric（拼错的属性名）会立即得到编译错误——上下文类型不允许）💡 要点
ℹ️ 说明 上下文推断是"从外向内"的类型流动，与普通推断（从表达式向变量）方向相反；两者同时存在时，有明确注解的一方胜出。
💡 提示 回调参数旁标红"隐式 any"通常说明上下文缺失（数组没标类型）——先修外层类型，而不是给回调加注解。
⚠️ 注意 React 的 onChange={(e) => ...} 之类回调依赖上下文类型；用 useCallback 包裹后单独提取时，类型注解要自己补上，否则参数退化为 any。
🏷️ 相关函数与类
💡 相关案例
更多案例即将上线。
❓ 常见问题
Q 上下文类型和类型推断是一回事吗？
A 不是。普通推断"从值到类型"（const x = 5 → number）；上下文类型"从位置到值"——先知道目标类型，再反推函数字面量参数。回调参数的类型几乎都来自后者。
Q 为什么我的 map 回调参数是 any？
A 数组本身没有类型（如来自 JSON.parse 或漏了注解），上下文无从提供，回调参数就成了隐式 any；给数组标注元素类型即可修复。
Q 上下文类型可以"放过"错误吗？
A 恰恰相反——它是检查的依据。回调里访问上下文类型没有的属性会立刻报错（多写一个字段也不行），这正是它能防止拼错属性名的原因。
