TypeScript中this与Derived类型报TS2367错误的原因及解决方法

TypeScript里的this是多态this类型，它代表的是调用该方法的实际实例类型，而非类本身的固定类型。在Base类的foo方法中，this的类型会被子类继承时替换为子类类型，而非始终是Base。

当你给Derived添加baz方法后，Derived成为了Base的一个独有子类型。TypeScript的类型检查会考虑所有可能的继承场景：比如如果有另一个子类OtherDerived extends Base，调用new OtherDerived().foo(new Derived())时，this是OtherDerived类型，和Derived完全没有重叠，此时this === bar的比较毫无意义。因此TypeScript提前抛出TS2367错误，避免这种无意义的代码。

你测试的const x = new Derived(); x.foo(x)能进入分支，只是单一合法场景，但TypeScript的类型检查是基于所有潜在调用场景，而非仅当前测试用例。而移除Derived的baz方法后，Derived和Base结构完全一致，TypeScript认为二者类型兼容，此时this（Base或Derived）和Derived存在重叠，错误自然消失。

根据你的需求，有几种可行方案：

方案1：使用this is Derived类型守卫 #

通过类型守卫明确告知TypeScript当前this属于Derived类型，消除类型不重叠的警告：

class Base {
  foo(bar: Derived) {
    if (this is Derived) {
      console.log("this equals bar");
    }
  }
}

class Derived extends Base {
  baz() {}
}

方案2：将参数类型改为this类型 #

如果foo方法的设计初衷就是接收与当前实例同类型的参数，这是最符合类型安全的方案：

class Base {
  foo(bar: this) {
    if (this === bar) {
      console.log("this equals bar");
    }
  }
}

class Derived extends Base {
  baz() {}
}

const x = new Derived();
x.foo(x); // 正常通过检查
// new Base().foo(new Derived()); // 此处会报错，符合类型安全预期

方案3：显式约束this的类型 #

如果确实需要foo方法中this仅为Base或Derived类型，可以显式指定this的类型范围：

class Base {
  foo(this: Base | Derived, bar: Derived) {
    if (this === bar) {
      console.log("this equals bar");
    }
  }
}

class Derived extends Base {
  baz() {}
}

内容的提问来源于stack exchange，提问作者Donald Duck is with Ukraine