TypeScript中构造函数入参为对象时如何使用简写语法

我们知道传统位置参数传递场景下，TypeScript 支持构造函数简写语法：无需提前声明类属性，在构造函数参数前增加访问修饰符即可自动完成属性声明和赋值操作。

传统位置参数的简写示例 #

原始写法 #

class Foo {
  private name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

简写写法 #

class Foo {
  constructor(private name: string, private age: number) {}
}

对象传参场景的简写实现 #

当构造函数参数通过单个对象传入时，可使用「解构+参数属性修饰符」的组合方式实现同等简写效果，无需手动逐行赋值。

常规非简写实现 #

class Foo {
  private name: string;
  private age: number;
  private group: string;
  constructor({
    name,
    age,
    group,
  }: {
    name: string;
    age: number;
    group: string;
  }) {
    this.name = name;
    this.age = age;
    this.group = group;
  }
}

简写实现 #

直接对解构的对象参数加访问修饰符即可：

class Foo {
  constructor(
    private { name, age, group }: { name: string; age: number; group: string }
  ) {}
}

如果需要支持可选参数和默认值，可以调整写法如下：

class Foo {
  constructor(
    private { name, age, group = '默认分组' }: { name: string; age: number; group?: string }
  ) {}
}

如果参数数量较多，也可以单独抽离参数类型定义，优化代码可读性：

// 单独定义入参类型
interface FooInitOptions {
  name: string;
  age: number;
  group?: string;
}

class Foo {
  // 直接将整个参数对象挂载为实例属性
  constructor(private options: FooInitOptions) {}
}
// 后续访问属性使用 this.options.name 即可

注：以上简写写法兼容 TypeScript 4.0 及以上正式版本。

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