TypeScript构造函数重载兼容对象与位置传参问题解决

我定义了一个包含多个必填属性与可选属性的类，可选属性未传值时需为undefined（无预设默认值）。由于可选参数数量较多，为提升代码可读性，传入可选参数时我希望使用对象形式的命名传参；仅传必填参数时则希望使用简洁的位置传参，即类需要同时支持两种实例化传参方式。

当前编写的代码如下：

export interface ParamInterface {
  a: number;
  b: number;
  c: number;
  d?: number;
  e?: number;
  f?: number;
}

export class MyClass {
  a: number;
  b: number;
  c: number;
  d?: number;
  e?: number;
  f?: number;

  constructor({a, b, c, d, e, f}: ParamInterface);
  constructor(a: number, b: number, c: number, d?: number, e?: number, f?: number) {
    this.a = a;
    this.b = b;
    this.c = c;
    this.d = d;
    this.e = e;
    this.f = f;
  }
}

预期效果 #

需要支持以下合法调用场景：

new MyClass(1, 2, 3); // d, e, f 为 undefined
new MyClass({a: 1, b: 2, c: 3}); // d, e, f 为 undefined
new MyClass({a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}); // d, e, f 正常赋值

同时以下非法调用需要抛出类型错误：

new MyClass(1); // 提示前三个参数为必填项

当前问题 #

代码执行类型检查时抛出错误：This overload signature is not compatible with its implementation signature.，需要修复该兼容性问题，或提供其他可实现预期传参效果的方案。

报错核心原因是TypeScript重载规则要求：所有对外暴露的重载签名，必须和实现签名的参数类型兼容。原代码中第一个重载签名的第一个参数是对象类型ParamInterface，但实现签名的第一个参数是number类型，二者不兼容因此触发报错。

修复方式是调整实现签名的参数为联合类型，内部通过判断参数类型归一化处理逻辑，修复后完整代码如下：

export interface ParamInterface {
  a: number;
  b: number;
  c: number;
  d?: number;
  e?: number;
  f?: number;
}

export class MyClass {
  a: number;
  b: number;
  c: number;
  d?: number;
  e?: number;
  f?: number;

  // 重载1：对象形式命名传参
  constructor(params: ParamInterface);
  // 重载2：位置形式顺序传参
  constructor(a: number, b: number, c: number, d?: number, e?: number, f?: number);
  // 实现签名：兼容两种入参格式，仅内部使用，对外不暴露
  constructor(aOrParams: number | ParamInterface, b?: number, c?: number, d?: number, e?: number, f?: number) {
    if (typeof aOrParams === 'object') {
      // 处理对象传参场景
      const { a, b: objB, c: objC, d: objD, e: objE, f: objF } = aOrParams;
      this.a = a;
      this.b = objB;
      this.c = objC;
      this.d = objD;
      this.e = objE;
      this.f = objF;
    } else {
      // 处理位置传参场景
      this.a = aOrParams;
      this.b = b!;
      this.c = c!;
      this.d = d;
      this.e = e;
      this.f = f;
    }
  }
}

实现说明 #

• 类型校验完全符合预期：所有合法调用可正常通过类型检查，缺少必填参数、参数类型错误的调用会正常抛出类型错误
• 代码中位置传参分支的b!、c!为TypeScript非空断言：由于重载规则已经约束位置传参时前三个参数必传，实际运行时这两个值一定存在，加断言仅用于消除编辑器类型提示，无运行时风险
• 实现签名不会对外暴露，TypeScript做类型提示时只会识别两个重载签名，不会出现允许非法入参的问题

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