TypeScript中继承类构造函数命名参数剩余参数的正确类型标注

你可以利用TypeScript内置的ConstructorParameters工具类型，自动提取父类构造函数的参数类型，无需手动重复编写父类的参数定义，同时还能获得完整的代码提示。

示例代码 #

首先定义父类MyClass：

class MyClass {
  constructor(public id: number, public age: number, public email: string) {
    // 父类初始化逻辑
  }
}

然后子类MyAwesomeClass的写法：

class MyAwesomeClass extends MyClass {
  // 用ConstructorParameters提取父类构造函数的参数类型作为剩余参数类型
  constructor(...props: ConstructorParameters<typeof MyClass>) {
    super(...props);
    // 子类自定义初始化逻辑
  }
}

效果说明 #

• 实例化子类时，TypeScript会自动根据父类的参数类型给出代码提示，避免传参错误
• 如果父类构造函数的参数发生变更，子类的参数类型会自动同步，无需手动修改

扩展：子类需要额外参数的情况 #

如果子类需要添加自己的构造参数，可以将自定义参数放在剩余参数之前：

class MyAwesomeClass extends MyClass {
  constructor(public nickname: string, ...props: ConstructorParameters<typeof MyClass>) {
    super(...props);
    // 子类自定义逻辑
  }
}

// 实例化时会正确提示参数顺序：先传子类的nickname，再传父类的三个参数
const instance = new MyAwesomeClass('alice', 1, 25, 'test@example.com');

原理说明 #

ConstructorParameters<T>是TypeScript内置的工具类型，它接收一个构造函数类型T，返回该构造函数的参数类型组成的元组类型，完美适配子类构造函数中剩余参数的类型定义。

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