TypeScript 类型推断和字面量类型拓宽是什么？

简化版

类型推断是 TypeScript 根据赋值、函数返回、控制流等上下文自动推导类型；字面量类型拓宽是把 'dark'、1 这类具体值推成更宽的 string、number。面试重点是：要知道什么时候依赖推断，什么时候用 as const、显式注解或 satisfies 保留精确类型。

详细版

示例：

let a = 'dark';   // string
const b = 'dark'; // 'dark'

const config = { mode: 'dark' };
// mode: string

const strictConfig = { mode: 'dark' } as const;
// readonly mode: 'dark'

let 变量以后可能被重新赋值，所以会拓宽成 string；const 基本值不可重新赋值，所以能保留字面量。对象属性即使用 const 声明，对象内部属性仍可修改，所以通常也会拓宽。真实项目里，路由名、事件名、权限码、状态枚举等常量需要保留字面量，否则后续推导联合类型会变得很宽。

完整版教学

一、类型推断是在减少重复标注

TypeScript 不要求所有变量都手写类型。它会根据初始化值、函数返回值、参数默认值、数组元素、对象属性和控制流推断类型。合理依赖推断可以让代码更短，也避免类型注解和实现重复维护。

const count = 3; // 3
let total = 3;   // number

function double(n: number) {
  return n * 2; // 返回值推断为 number
}

这里 3 是具体数字字面量，number 是更宽的数字类型。推断不是越窄越好，编译器会根据变量是否可变来选择更实用的类型。面试时不要只说“TS 会自动推类型”，要说明它会在精确性和可变性之间取平衡。

二、字面量类型拓宽来自可变性

字面量类型表示某个具体值，例如 'success'、404、true。如果变量后续可能被改成同类其他值，TypeScript 会把它拓宽。这就是 let 和 const 推断不同的根本原因。

let status = 'idle';
status = 'loading';
// status: string

const fixedStatus = 'idle';
// fixedStatus: 'idle'

数字例子也一样：

let retry = 3;   // number
const maxRetry = 3; // 3

如果 retry 保留成字面量 3，那后续赋值为 4 就会报错，这不符合 let 的使用预期。所以拓宽不是类型系统不聪明，而是在为可变变量保留空间。

三、对象属性为什么也常被拓宽

很多同学以为 const obj = { mode: 'dark' } 中的 mode 会推成 'dark'。实际上对象变量本身不能重新绑定，但对象属性仍然可以修改。所以 TypeScript 默认会把属性推宽成 string。

const theme = { mode: 'dark' };
theme.mode = 'light'; // 允许
// theme.mode: string

如果你想把整个配置对象作为常量表使用，需要显式告诉编译器。

const theme = {
  mode: 'dark',
  spacing: 8,
} as const;
// mode: 'dark'; spacing: 8; 属性 readonly

写法	推断结果	是否可改
`let x = 'a'`	`string`	变量可改
`const x = 'a'`	`'a'`	变量不可重新绑定
`const obj = { x: 'a' }`	`{ x: string }`	属性可改
`const obj = { x: 'a' } as const`	`{ readonly x: 'a' }`	属性只读

四、上下文类型会反过来影响推断

类型推断不只看右边的值，也会看左边或调用位置提供的上下文。这叫 contextual typing。比如事件处理函数的参数类型，常由接收它的 API 决定。

type Handler = (event: { x: number; y: number }) => void;

const handler: Handler = event => {
  console.log(event.x + event.y);
};

event 没有显式标注，但它从 Handler 上下文推断出 { x: number; y: number }。这解释了为什么 React、Vue、DOM API 中很多回调参数能自动提示。如果上下文丢失，推断也会退化。

有目标类型
  -> 回调参数获得上下文
  -> IDE 能提示属性
无目标类型
  -> 参数可能变成 any 或需要显式标注

五、保留精确类型的常见工具

常量表、事件名、路由名、权限码经常需要从值推导类型。如果字面量被拓宽，后续得到的联合类型就会失去价值。常见手段有 as const、显式字面量注解、satisfies。

const EVENTS = {
  login: 'user:login',
  logout: 'user:logout',
} as const;

type EventName = typeof EVENTS[keyof typeof EVENTS];
// 'user:login' | 'user:logout'

如果不用 as const，EventName 很可能变成 string。这会让函数参数失去约束，任何字符串都能传入。

function emit(event: EventName) {}

emit('user:login'); // ok
emit('user:delete'); // 报错

记忆钩子：推断是“少写类型”，拓宽是“给可变值留余地”，as const 是“把值钉住”。

六、什么时候应该显式标注类型

并不是所有地方都应该依赖推断。公共函数返回值、对外导出的 API、复杂对象边界、接口数据解析结果，通常更适合显式标注。这样可以让契约更清楚，也能避免内部实现变化意外改变外部类型。

export function parseUser(raw: unknown): { id: string; name: string } {
  // 省略运行时校验
  return raw as { id: string; name: string };
}

一个经验数字：局部变量 80% 以上可以交给推断；模块边界、组件 props、库函数返回值更建议写清楚。推断适合内部流动，显式类型适合对外契约。这也是工程化 TypeScript 和刷语法题的区别。

七、常见误区与追问

误区：类型推断一定越精确越好。 对可变变量来说，过窄类型会阻止合理赋值，所以 TypeScript 会主动拓宽。
误区：const 对象的属性一定是字面量类型。 const 只限制变量绑定，对象属性默认仍可修改，因此属性通常会拓宽。
误区：所有地方都应该手写类型注解。 局部变量过度标注会制造重复，公共边界和复杂返回值才更需要显式契约。
追问：为什么 let x = 'a' 是 string？ 因为 let 变量后续可能赋值为其他字符串，拓宽后更符合可变语义。
追问：如何从常量对象生成联合类型？ 用 as const 保留 key/value 字面量，再配合 typeof obj[keyof typeof obj] 推导。
追问：satisfies 对推断有什么帮助？ 它能检查对象满足目标类型，同时尽量保留表达式自身的精确推断。

八、加强记忆

这题按“推断来源、拓宽原因、保窄手段、标注边界”串起来答。先说 TypeScript 会根据上下文推断；再解释 let、对象属性因为可变会拓宽；接着用事件名常量表展示 as const 如何得到精确联合类型；最后补一句公共 API 不要全靠推断，要写清契约。

简化版

详细版