在 TypeScript 中设置类属性的默认值

作者

为 TypeScript 中的类属性设置默认值

Set default values for Class properties in TypeScript

您可以直接在类上设置类属性的默认值。

当您使用运算符实例化类时new，您将可以访问该属性的默认值，并且可以在以后更改它。

索引.ts
class Employee {
  id = 0;
  name = 'Bobby Hadz';
  country = 'Germany';
  tasks: string[] = [];

  vacation: {
    summer: boolean;
    winter: boolean;
  } = {
    summer: false,
    winter: false,
  };
}

const emp1 = new Employee();

emp1.id = 701;
emp1.name = 'Alice';
emp1.country = 'Austria';
emp1.tasks = ['web dev', 'design'];
emp1.vacation = {
  summer: true,
  winter: false,
};

// 👇️ {id: 701, name: 'Alice', country: 'Austria', ...}
console.log(emp1);

我们创建了一个具有各种属性默认值的Employee
类。

请注意，当我们为字符串和数字文字分配默认值时，我们不必明确指定类型。

TypeScript 能够
根据我们提供的默认值推断id,name和属性的类型。country

但是，如果您指定一个
空数组的默认值，TypeScript 会推断其类型为never[]。

换句话说，它是一个永远为空的数组。

如果您为对象的所有属性提供默认值，您可以让 TypeScript 推断对象的类型，但根据我的经验，最好显式键入对象和数组。

可以通过创建类的实例并更改实例的属性来更改所有初始值。

在构造方法中指定默认值

另一种方法是在类的构造方法中提供默认值。

索引.ts
class Employee {
  constructor(
    public id = 0,
    public name = 'Bobby Hadz',
    public tasks: string[] = [],
  ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }
}

const emp1 = new Employee(undefined, undefined, ['accounting']);

emp1.id = 100;

// 👇️ {id: 100, name: 'Bobby Hadz', tasks: ['accounting']}
console.log(emp1);


我们直接在构造函数中为类的属性提供
默认值。

如果在使用运算符实例化类时需要覆盖默认值，则可以使用这种方法new。

如果要省略特定参数并使用其默认值，请在实例化类时传递。 undefined

请注意，您必须明确键入您未为其设置默认值的任何类的属性或参数。

索引.ts
class Employee {
  constructor(
    public id: number,
    public name = 'Bobby Hadz',
    public tasks: string[] = [],
  ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }
}

const emp1 = new Employee(100, undefined, ['accounting']);

该id参数没有设置默认值，因此我们必须将其显式键入为number.

当将这种方法用于将对象作为参数的类时，语法会有点混乱。

索引.ts
class Employee {
  id: number;
  name: string;
  tasks: string[];
  vacation: {
    summer: boolean;
    winter: boolean;
  };

  constructor(
    { id, name, tasks, vacation } = {
      id: 0,
      name: 'Bobby Hadz',
      tasks: [],
      vacation: { summer: false, winter: false },
    },
  ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
    this.vacation = vacation;
  }
}

const emp1 = new Employee();

// 👇️ Employee {id: 0, name: 'Bobby Hadz', tasks: []}
console.log(emp1);

emp1.id = 100;
emp1.name = 'Alice';
emp1.tasks = ['web dev', 'design'];
emp1.vacation.summer = true;

// 👇️ {id: 100, name: 'Alice', tasks: ['web dev', 'design'], ...}
console.log(emp1);

当你在类构造函数中有一个对象参数时，事情变得有点难以阅读。

这就是为什么我更喜欢坚持使用多个逗号分隔的参数。

在实例化类时，我们不必记住参数顺序，因为任何现代 IDE 都会向我们显示我们使用的参数以及接下来需要提供的参数。

如果在为属性设置默认值时弄乱了语法，就会出现
“A type literal property cannot have an initializer”
错误。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：