TypeScript泛型参数推断规则及VSCode与Playground行为差异问询

1. TypeScript泛型参数的推断逻辑 #

TypeScript泛型参数的推断会结合上下文类型、属性约束优先级和函数声明方式来确定：

• 当onChange用箭头函数时，TypeScript会启用上下文推断：它会优先从泛型类型的其他属性（比如availableValues: T[]）中提取更具体的类型作为T的候选。如果availableValues的元素类型是Foo，即便onChange的参数包含Foo | null | string | number，TypeScript会自动收缩T为Foo——因为数组元素类型的约束更明确、更具体。
• 当onChange改用普通函数声明时，TypeScript不会自动为函数参数应用上下文收缩。此时你显式指定的参数类型Foo | null | string | number会被当作T的直接约束，泛型推断会直接取这个联合类型作为T的结果，因为普通函数的参数类型被视为独立的类型声明，不会反向依赖其他属性的约束来收缩。

对应场景的代码示例：

type Foo = { id: number };
type SomeComponentProps<T> = {
  onChange: (v: T | null | string | number) => void;
  availableValues: T[];
};

// 箭头函数：T被推断为Foo
const arrowProps = {
  onChange: (v: Foo | null | string | number) => {},
  availableValues: [{ id: 1 }]
} satisfies SomeComponentProps<infer T>;

// 普通函数：T被推断为Foo | null | string | number
const funcProps = {
  onChange: function(v: Foo | null | string | number) {},
  availableValues: [{ id: 1 }]
} satisfies SomeComponentProps<infer T>;

2. VSCode与TypeScript Playground行为不一致的原因 #

核心差异来自编译选项的严格程度：

• TypeScript Playground默认启用了strict: true，这个选项会开启一系列严格类型检查规则（包括strictNullChecks、strictFunctionTypes等）。在严格模式下，TypeScript会优先选择最具体的类型来匹配泛型约束，所以会从availableValues推断T为Foo。
• 你的VSCode项目中如果strict设为false（或部分严格子选项未开启），类型推断会变得宽松：它不会主动收缩联合类型，而是直接将onChange的参数联合类型作为T的推断结果。

只需确保VSCode使用的TypeScript版本与Playground一致（你提到是4.9.5），然后在tsconfig.json中设置strict: true，VSCode的推断结果就会和Playground对齐。

内容的提问来源于stack exchange，提问作者dwjohnston