TypeScript中this类型与类类型行为差异问题求解

问题描述 #

重构项目存量代码时发现，TypeScript对this类型的处理逻辑与普通类类型存在不一致，最小复现代码如下：

export type FilterConditionally<Source, Condition> = Pick<
  Source,
  { [K in keyof Source]: Source[K] extends Condition ? K : never }[keyof Source]
>;

class Animation<T> {
  constructor(target: T, props: FilterConditionally<T, number>) {
    console.log(target, props);
  }
}

class CustomObject {
  x = 0;
  name = 'test';
  flag = false;

  constructor() {
    const anim = new Animation(this, { x: 0 }); 
    // 编译报错：Argument of type '{ x: 0; }' is not assignable to parameter of type 'FilterConditionally<this, number>'.
    const anim2 = new Animation(this as CustomObject, { x: 0 }); 
    // 无编译错误，此处将this强转为CustomObject类型
  }
}

实现逻辑说明：
泛型类Animation<T>接收两个构造参数：

• 第一个参数为动画目标对象target
• 第二个参数为props对象，仅允许传入目标对象中类型为number的属性（非数值类型无法执行动画逻辑）

实际校验表现存在差异：

• 将this通过as强转为自定义类类型传入时，类型校验逻辑正常，编译器可正确提示合法属性且无报错
• 直接传入this作为target时，编译器抛出类型不匹配错误

由于场景为面向第三方使用者开发类库，要求用户手动对this做类型强转的方案体验差且不合理，需要明确问题产生原因，以及无需强制类型转换的修复方案。

问题根因 #

TypeScript类内部的this不是固定指向当前类的精确类型，而是多态this类型：该类型代表当前类实例的所有可能子类型，而非当前类本身。当类被继承时，this会自动指向子类实例类型，而非父类类型。
由于TypeScript无法提前确定this最终会不会被子类修改属性类型（比如子类重写x属性为string类型），对多态this执行高阶条件类型运算（比如示例中的FilterConditionally映射过滤）时，会默认判定映射结果不可靠，无法匹配传入的对象字面量类型。
当使用as 类名强转后，多态this被收敛为精确的类类型，此时条件类型可以正常运算出明确的类型结构，因此不会触发报错。

修复方案 #

无需用户侧强制类型转换，类库侧可通过以下任意一种方案修复：

方案1：调整工具类型收敛多态this（兼容所有TS版本） #

在条件类型中通过& {}将多态this收敛为普通对象类型，让映射类型可以正常遍历属性键，修改后的FilterConditionally定义如下：

export type FilterConditionally<Source, Condition> = Pick<
  Source & {},
  { [K in keyof (Source & {})]: (Source & {})[K] extends Condition ? K : never }[keyof (Source & {})]
>;

方案2：使用NoInfer工具类型（TS 5.4+版本支持） #

调整Animation类构造函数的类型定义，通过NoInfer避免TS对多态this的泛型推导产生严格不兼容判断：

class Animation<T> {
  constructor(target: T, props: FilterConditionally<NoInfer<T>, number>) {
    console.log(target, props);
  }
}

NoInfer会告诉TypeScript仅从target参数推导泛型T，不要从props参数位置反向推导，避免多态this在条件类型运算时产生不兼容判定。

内容的提问来源于stack exchange，提问作者Ondřej Klika