Angular 8中高效初始化含嵌套Address类的User对象的方法

我之前在Angular项目里也碰到过一模一样的问题，手动给每个属性填空值实在太繁琐了，给你分享几个实用的解决方案，不用挨个设置空值就能顺利初始化：

1. 给构造函数参数添加可选标记 #

直接把类构造函数里的参数改成可选（加?），这样TypeScript就不会强制要求你初始化时传入所有值，未传入的属性会自动设为undefined。修改后的代码如下：

class Address {
  constructor(
    public street?: string,
    public number?: number,
    public suffix?: string,
    public houseLetter?: string,
    public city?: string,
    public zipcode?: string,
  ) { }
}
export class User {
  constructor(
    public id?: number,
    public firstName?: string,
    public lastName?: string,
    public email?: string,
    public address?: Address,
  ) { }
}

这样你就可以直接let user = new User()或者let user: User = {} as User来初始化，完全不会报错。

2. 给参数设置默认值 #

如果不想让属性变成undefined，可以给每个参数设置合理的默认值，比如空字符串、0或者空的Address实例。这样初始化时即使不传参数，属性也会有默认值：

class Address {
  constructor(
    public street: string = '',
    public number: number = 0,
    public suffix: string = '',
    public houseLetter: string = '',
    public city: string = '',
    public zipcode: string = '',
  ) { }
}
export class User {
  constructor(
    public id: number = 0,
    public firstName: string = '',
    public lastName: string = '',
    public email: string = '',
    public address: Address = new Address(),
  ) { }
}

现在let user = new User()会自动生成一个所有属性都有默认值的对象，后续你只需要修改需要更新的字段就行。

3. 写一个工厂函数统一生成默认对象 #

如果你的类结构比较复杂，或者需要在多个地方初始化，可以写一个工厂函数来封装默认值逻辑，避免重复代码：

class Address {
  // 原构造函数不变
  constructor(
    public street: string,
    public number: number,
    public suffix: string,
    public houseLetter: string,
    public city: string,
    public zipcode: string,
  ) { }
}
export class User {
  constructor(
    public id: number,
    public firstName: string,
    public lastName: string,
    public email: string,
    public address: Address,
  ) { }
}

// 工厂函数
export function createDefaultUser(): User {
  return new User(
    0,
    '',
    '',
    '',
    new Address('', 0, '', '', '', '')
  );
}

使用的时候直接调用let user = createDefaultUser()，非常方便，而且后续如果默认值需要修改，只改这一个函数就行。

4. 利用Partial类型快速初始化 #

TypeScript的Partial<T>类型可以把目标类型的所有属性变成可选的，结合类型断言就能快速创建一个空的User对象：

// 快速创建一个空的User对象
let user: User = {} as Partial<User> as User;

// 如果需要部分默认值，可以这样写
let userWithDefaults = Object.assign({}, {
  id: 0,
  firstName: '',
  address: {} as Partial<Address> as Address
}) as User;

不过要注意，这种方式创建的对象可能存在属性为undefined的情况，后续使用时最好用可选链（user?.address?.street）来避免报错，或者确保在使用前补全必要属性。

注意事项 #

• 如果这些对象要传给后端API，一定要确保必填字段都有有效值，避免后端返回参数错误；
• 用可选参数或Partial类型时，在模板或逻辑中访问属性要小心undefined，可以配合Angular的*ngIf或者可选链操作符处理。

内容的提问来源于stack exchange，提问作者A. Nurb