如何限制同名方法类的互换使用？TypeScript类型约束问题

TypeScript采用结构类型系统，只要两个类型的结构匹配（拥有相同的成员和签名），就会被视为兼容。你的Group类和Shape类都有render()方法，因此TypeScript判定Group是Shape的子类型，允许传入Group实例到add方法中。

以下是几种可靠的解决方法：

方法1：给Shape添加私有成员（最推荐） #

在Shape类中添加一个私有成员，由于私有成员的兼容性仅在同一个类的实例间生效，Group类没有这个私有成员，就会被TypeScript判定为不兼容：

// Shape.ts
export default class Shape {
  // 添加私有成员，用于区分结构相似的类型
  private readonly _shapeMarker = true;
  
  public render(): void {
    console.log("Render Shape");
  }
}

此时再尝试执行group2.add(group1)，TypeScript会抛出错误：

Argument of type 'Group' is not assignable to parameter of type 'Shape'.
Property '_shapeMarker' is missing in type 'Group' but required in type 'Shape'.

方法2：使用唯一符号标记类型 #

通过Symbol创建一个唯一的属性键，只在Shape类中定义，同样可以打破结构兼容性：

// Shape.ts
export const SHAPE_MARKER = Symbol('shape-marker');

export default class Shape {
  [SHAPE_MARKER] = true;
  
  public render(): void {
    console.log("Render Shape");
  }
}

这种方式的好处是不会额外增加私有属性，符号属性在外部无法访问，同样能阻止Group实例被传入add方法。

方法3：通过条件类型限制参数（避免循环引用） #

如果不想修改Shape类，可以在Group的add方法中使用条件类型，排除Group类型的参数：

// Group.ts
import Shape from "./Shape";

// 先提前声明Group类型，避免循环引用
declare class Group {}

export default class Group {
  private shapes: Shape[] = [];

  public add<T extends Shape>(shape: T extends Group ? never : T): void {
    this.shapes.push(shape);
  }

  public render(): void {
    for (const shape of this.shapes) {
      shape.render();
    }
  }
}

这种方式不需要修改Shape，但需要注意循环引用的问题，适合无法修改Shape类的场景。

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