TypeScript 中如何使用可选属性-JavaScript中文网-JavaScript教程资源分享门户

什么是可选属性

在 TypeScript 中，我们常常需要定义一个对象，这个对象可能包含一些属性，有些属性必须要存在，但有些属性是可选的。比如一个人的对象有姓名、年龄、性别等属性，但有些属性如职业、血型等可能是可选的。

在 JavaScript 中，我们通常使用 undefined 或 null 来表示一个属性不存在，但这种方式容易引起类型不一致的问题。在 TypeScript 中，我们可以使用可选属性来解决这个问题。

在 TypeScript 中，可选属性的定义方式是在属性名后面加一个问号?。例如：

interface Person {
  name: string;
  age: number;
  gender?: string;
}

上面的代码定义了一个 Person 接口，它包含 name 、age 和 gender 三个属性，其中 gender 是可选的。

在使用可选属性时，我们可以直接访问这个属性，如果对象中不存在该属性，则 TypeScript 会认为它的值是 undefined。

const person: Person = {
  name: 'Jack',
  age: 20
};

console.log(person.gender); // undefined

有些属性在定义之后就不应该被修改，我们可以使用只读属性来实现这个功能。只读属性是指属性只能在对象刚刚创建时赋值，赋值之后就不能再修改了。在 TypeScript 中，我们可以使用 readonly 关键字来定义只读属性。

interface Person {
  readonly name: string;
  age: number;
  gender?: string;
}

有时候我们需要更新一个对象的一部分属性，而不是全部属性。在 TypeScript 中，我们可以使用对象展开运算符 ... 来实现这个功能。

const person: Person = {
  name: 'Jack',
  age: 20
};

const updatedPerson = { ...person, age: 21 };

上面的代码更新了 person 对象的 age 属性，同时保留了其他属性不变。我们也可以只添加一个新的属性，其他属性保留原值。

const addedPerson = { ...person, job: 'student' };

上面的代码添加了一个新的 job 属性，其他属性保留原值。

在 TypeScript 中，我们可以使用可选属性来定义一个对象，其中某些属性是可选的；也可以使用只读属性来限制属性的修改；还可以使用对象展开运算符来更新一个对象的部分属性。这些功能可以帮助我们更加方便地管理对象，并避免类型不一致的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648f6d1948841e9894dae77e