TypeScript 中的可选属性和必选属性

TypeScript 是 JavaScript 的超集，它在 JavaScript 的基础上增加了强类型、类、接口等功能，使得开发者在编写 JavaScript 应用时拥有更强的代码提示和检查功能，从而提高代码质量和可维护性。

在 TypeScript 中，我们经常需要定义类和接口，其中包含必选属性和可选属性，本文将深入介绍 TypeScript 中可选属性和必选属性的使用。

必选属性

在 TypeScript 中，我们可以通过接口来定义一个对象类型，可以包含必选属性和可选属性。必选属性指的是对象中必须包含的属性，如果没有这些属性，TypeScript 编译器会警告并报错。

以下是一个包含必选属性的例子：

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

const person: Person = { name: '张三', age: 19 };  // 编译通过
const person2: Person = { name: '李四' };  // 编译错误，缺少 age 属性

在上面的例子中，我们定义了一个 Person 接口，它包含两个必选属性 name 和 age，我们创建了两个实例，其中 person 实例有 name 和 age 两个属性，是合法的，并通过了 TypeScript 编译器的检查，而 person2 实例缺少必选属性 age，因此在编译时会报错。

可选属性

有时候，我们也需要定义一些可选属性，这些属性不是必须的，可以存在也可以不存在。定义可选属性需要在属性名后面加上问号 ?，如下所示：

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

const person: Person = { name: '张三' };  // 编译通过
const person2: Person = { name: '李四', age: 20 };  // 编译通过

在上面的例子中，我们将 age 属性定义为可选属性，并创建了两个实例，其中 person 实例缺少 age 属性，但是由于 age 是可选的，所以编译通过，而 person2 实例包含了 age 属性，也被编译器认为是合法的实例。

注意事项

只读属性

类和接口中还可以定义只读属性，它们的值在初始化后不能被修改。只读属性的定义需要使用关键字 readonly。

以下是一个包含只读属性的例子：

interface User {
  readonly name: string;
  readonly age: number;
}

const user: User = { name: '张三', age: 20 };
user.name = '李四';  // 编译错误，只读属性不能被修改

在上面的例子中，我们定义了一个 User 接口，它包含两个只读属性 name 和 age，我们创建了一个 user 实例，并尝试修改其中的 name 属性，由于 name 是只读属性，因此在编译时会报错。

可选属性别名

在 TypeScript 中，我们还可以给可选属性定义一个别名，别名在实际使用时可以替代可选属性。

以下是一个使用可选属性别名的例子：

-- -------------------- ---- -------
--------- ---- -
  ----- -------
  -------- ------ - -------
-

---- ------------ - -
  -------- --------------
-

----- ----- ---- - - ----- ---- --
----- ------------- ------------ - - --
------------------- - --------------
----------- - --------------------
展开代码

在上面的例子中，我们定义了一个 User 接口，它包含一个必选属性 name 和一个可选属性 mobile，我们又定义了一个 UserContacts 类型，它的属性 mobile 是 User 类型中 mobile 属性的别名，这里我们将其定义为可选的。然后，我们创建了一个 user 实例和一个 userContacts 实例，并将 userContacts 实例中的 mobile 值赋值给 user 实例的 mobile 属性。

总结

本文介绍了 TypeScript 中可选属性和必选属性的使用方法，以及只读属性和可选属性别名的应用。在实际开发过程中，我们需要合理地使用可选属性和必选属性，以及只读属性和可选属性别名，从而提高代码质量和可维护性。

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