为什么TypeScript中直接访问属性与通过函数返回属性时的类型推断结果不一致？

嘿，这个问题其实挺有意思的，咱们一步步拆解来看：

首先先看你给出的代码：

declare class BaseClass<TValue = any> {
  value: TValue;
  foo(value: TValue): void;
}

type Wrapped<T> = { value: T }

declare class ConcreteClasss<TValue> extends BaseClass<TValue> {
  constructor(value: Wrapped<TValue> | TValue);

  override foo(value: TValue | Wrapped<TValue>): void;
}

const valuesOf = <V>(base: BaseClass<V>): V => base.value;


const base = new ConcreteClasss('Alma');
    //^?

const value = base.value;
    //^? string

const value2 = valuesOf(base);
    //^? string | Wrapped<string>

直接访问base.value得到的是string，但通过valuesOf函数返回的却是string | Wrapped<string>，差异的核心原因在于子类重写方法的参数兼容性，以及TypeScript对泛型参数的推断逻辑：

• 当你创建new ConcreteClasss('Alma')时，TypeScript会直接推断ConcreteClasss的泛型参数TValue为string——因为构造函数传入的字符串'Alma'正好匹配TValue类型（构造函数接受Wrapped<TValue> | TValue，这里直接命中TValue=string）。所以base的类型是明确的ConcreteClasss<string>，直接访问它的value属性，自然就是继承自BaseClass<string>的string类型。

• 但当你把base传入valuesOf函数时，情况就不一样了：valuesOf接受的参数是BaseClass<V>，TypeScript需要推断出合适的V，使得ConcreteClasss<string>能够兼容BaseClass<V>。

这里的关键矛盾点在子类重写的foo方法上：父类BaseClass<V>的foo方法只接受V类型的参数，而子类的foo方法接受TValue | Wrapped<TValue>（也就是string | Wrapped<string>）。在TypeScript的类型系统中，子类要兼容父类，子类的方法参数应该是父类方法参数的超集（逆变原则）——简单说就是父类能接受的类型，子类必须也能接受。但这里反过来了：子类的foo能接受比父类更多的类型（Wrapped<string>），如果TypeScript推断V=string，那么把子类当作父类使用时，调用foo传入Wrapped<string>会违反父类的类型约束，这是类型不安全的。

为了避免这种不安全的情况，TypeScript会自动把V推断为string | Wrapped<string>——这样BaseClass<V>的foo方法接受string | Wrapped<string>，和子类的foo参数类型完全匹配，两者就兼容了。而valuesOf返回的是V，所以最终结果就是string | Wrapped<string>。

简单总结：直接访问属性时，用的是子类明确的泛型参数类型；而通过父类泛型函数传递时，TypeScript为了保证父子类的方法兼容性，会拓宽泛型参数的类型，导致返回结果的类型和直接访问不一致。

备注：内容来源于stack exchange，提问作者Matthieu Riegler