TypeScript 是一种静态类型的 JavaScript 超集，它提供了更加严格的类型检查和语法规范，可以帮助我们更好地编写可维护、可扩展的前端代码。在 TypeScript 中，对象是一种非常常见的数据类型，因此对于对象属性及类型定义技巧的掌握，对于我们编写高质量的 TypeScript 代码非常重要。
定义对象属性类型
在 TypeScript 中，我们可以使用 interface 或 type 关键字来定义对象属性的类型。下面是一个简单的例子：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- -------- ------ - --------- - ---- ---- - - ------ ------- ------- ------- ------ ------- --
在上面的例子中，我们分别使用了 interface 和 type 定义了两个对象类型 User 和 Book。其中，User 对象有三个属性：name 和 age 是必填属性，gender 是可选属性，并且它的值只能是 'male' 或 'female'。Book 对象有三个必填属性：title、author 和 price。
对象属性的可选性
在 TypeScript 中，我们可以使用 ? 符号来表示对象属性的可选性。例如，上面的 User 对象中，gender 属性就是可选的。如果我们不想在定义对象时写出所有属性，可以使用 Partial 类型来定义一个对象类型的可选属性：
type PartialUser = Partial<User>;
const user: PartialUser = {
name: 'Tom',
age: 18,
};在上面的例子中，我们使用 Partial<User> 定义了一个 PartialUser 类型，表示 User 对象的所有属性都是可选的。然后我们创建了一个 user 对象，只填写了 name 和 age 两个属性，而 gender 属性则是不填写的。
对象属性的只读性
在 TypeScript 中，我们可以使用 readonly 关键字来定义对象属性的只读性。例如：
interface Point {
readonly x: number;
readonly y: number;
}
const point: Point = { x: 0, y: 0 };
point.x = 1; // Error: Cannot assign to 'x' because it is a read-only property.在上面的例子中，我们定义了一个 Point 对象，它有两个只读属性 x 和 y，表示一个坐标点的位置。然后我们创建了一个 point 对象，并尝试修改它的 x 属性，但是 TypeScript 编译器会报错，因为 x 属性是只读的。
对象属性的类型守卫
在 TypeScript 中，我们可以使用类型守卫来保证对象属性的类型正确。例如：
-- -------------------- ---- -------
--------- ------ -
----- ---------
----- -------
-
--------- --------- -
----- ------------
------ -------
------- -------
-
---- ----- - ------ - ----------
-------- ----------- ------ -
-- ----------- --- --------- -
------ ---------- - -----------
- ---- -
------ ----------- - -------------
-
-在上面的例子中，我们定义了两个接口 Square 和 Rectangle，分别表示正方形和矩形。然后我们使用 type 定义了一个联合类型 Shape，表示所有的形状。最后我们编写了一个 area 函数，根据 shape 的类型来计算其面积。在函数内部，我们使用 if (shape.kind === 'square') 来判断 shape 的类型是否为正方形，如果是，则使用 shape.size * shape.size 计算面积，否则使用 shape.width * shape.height 计算面积。
结论
在 TypeScript 中，对象是一种非常常见的数据类型，因此我们需要掌握对象属性及类型定义技巧，以便更好地编写可维护、可扩展的前端代码。本文介绍了对象属性类型的定义、对象属性的可选性、对象属性的只读性和对象属性的类型守卫等技巧，并提供了详细的示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67566b89d8a608cf5d8bccff