为何类型已被推断仍需显式标注？TS泛型组件推断问题解析

const foo = ({ bar: true });

const functionDeclaredOutsideJsx = (a: any) => foo;

const App = () => (
  <>
    <GenericElement
      // (parameter) a: string
      f={(a) => foo}
      g={(b) => {
        // Property 'bar' does not exist on type 'unknown'.
        b.bar;
      }}
    />

    <GenericElement
      f={(a: string) => foo}
      g={(b) => {
        b.bar;
      }}
    />

    <GenericElement
      f={functionDeclaredOutsideJsx}
      g={(b) => {
        b.bar;
      }}
    />
  </>
);


const GenericElement = <T,>(_: {
  f: (a: string) => T;
  g: (b: T) => void;
}) => (<></>)

问题描述 #

在第一个<GenericElement>中，参数a被推断为string，但b却被推断为unknown；第二个仅为a添加显式string类型标注后，b就正确推断出包含bar字段；第三个使用外部声明的带any类型的函数，b也能正确推断。请问为何第一个案例不符合预期，后两个却正常？

解答 #

这本质是TypeScript泛型推断的上下文优先级与推断顺序问题，具体拆解如下：

• 第一个案例的推断逻辑
  当你在GenericElement中写f={(a) => foo}时，TypeScript会优先根据组件的泛型约束（f的定义是(a: string) => T）推断a的类型，因此a被自动设为string。但此时TS不会立刻从foo的类型反向推导泛型T，而是先处理g的参数b——由于T尚未明确，TS会给T分配兜底的unknown类型，导致b被推断为unknown。

核心原因是：在JSX属性的上下文里，TS优先用组件的入参约束推断函数参数类型，而非先从函数返回值推导泛型T，再用T约束g的参数。

• 第二个案例的推断逻辑
  给a加上显式string标注后，相当于明确f的入参完全符合GenericElement的约束，此时TS会转而从f的返回值（即foo的类型{ bar: boolean }）推导泛型T，进而让g的参数b自动继承T的类型，因此b.bar可以正常访问。

• 第三个案例的推断逻辑
  外部声明的functionDeclaredOutsideJsx的返回值类型已提前确定为foo的类型（a: any不影响返回值的类型推断）。当把它作为f传入时，TS会直接用该函数的返回值类型推导泛型T，所以g的参数b自然被推断为{ bar: boolean }，无需额外标注。

总结 #

• 第一个案例中，TS优先推断函数参数a的类型，导致泛型T未及时从返回值推导，最终兜底为unknown
• 后两个案例通过显式标注或提前确定函数返回值类型，让TS优先从返回值推导泛型T，从而正确约束g的参数类型

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