【阮一峰】6.对象

对象 简介

对象的类型就写在变量名后面，使用大括号描述，内部声明每个属性的属性名和类型。

const obj: { x: number; y: number; } = { x: 1, y: 1 };

属性的类型可以用分号结尾，也可以用逗号结尾。

// 属性类型以分号结尾 type MyObj = { x: number; y: number; }; // 属性类型以逗号结尾 type MyObj = { x: number; y: number; };

一旦声明了类型，对象赋值时，就不能缺少指定的属性，也不能有多余的属性。

对象的方法使用函数类型描述。

const obj: { x: number; y: number; add(x: number, y: number): number; // 或者写成 // add: (x:number, y:number) => number; } = { x: 1, y: 1, add(x, y) { return x + y; }, };

对象类型可以使用方括号读取属性的类型。

type User = { name: string; age: number; }; type Name = User["name"]; // string

除了type命令可以为对象类型声明一个别名，interface命令可以把对象类型提炼为一个接口。

// 写法一 type MyObj = { x: number; y: number; }; const obj: MyObj = { x: 1, y: 1 }; // 写法二 interface MyObj { x: number; y: number; } const obj: MyObj = { x: 1, y: 1 };

:::tip TypeScript 不区分对象自身的属性和继承的属性，一律视为对象的属性。 :::

interface MyInterface { toString(): string; // 继承的属性 prop: number; // 自身的属性 } const obj: MyInterface = { // 正确 prop: 123, };

obj只声明了prop属性，但是不报错，因为它继承了原型上的toString()方法。

可选属性

可选属性在属性名后面加一个问号。

const obj: { x: number; y?: number; } = { x: 1 }; 只读属性

属性名前面加上 readonly 关键字，表示这个属性是只读属性，不能修改。

interface MyInterface { readonly prop: number; }

只读属性只能在对象初始化期间赋值，此后就不能修改该属性。

:::tip 如果属性值是一个对象，readonly 修饰符并不禁止修改该对象的属性，只是禁止完全替换掉该对象。 :::

interface Home { readonly resident: { name: string; age: number; }; } const h: Home = { resident: { name: "Vicky", age: 42, }, }; h.resident.age = 32; // 正确 h.resident = { name: "Kate", age: 23, }; // 报错

:::tip 如果一个对象有两个引用，即两个变量对应同一个对象，其中一个变量是可写的，另一个变量是只读的，那么从可写变量修改属性，会影响到只读变量。 :::

interface Person { name: string; age: number; } interface ReadonlyPerson { readonly name: string; readonly age: number; } let w: Person = { name: "Vicky", age: 42, }; let r: ReadonlyPerson = w; w.age += 1; r.age; // 43

赋值时在对象后面加上只读断言 as const，也可以声明属性是只读。

const myUser = { name: "Sabrina", } as const; myUser.name = "Cynthia"; // 报错

如果变量明确地声明了类型，那么 TypeScript 会以声明的类型为准。

const myUser: { name: string } = { name: "Sabrina", } as const; myUser.name = "Cynthia"; // 正确 属性名的索引类型

TypeScript 允许采用属性名表达式的写法来描述类型，称为“属性名的索引类型”。

索引类型里面，最常见的就是属性名的字符串索引。

type MyObj = { [property: string]: string; }; const obj: MyObj = { foo: "a", bar: "b", baz: "c", };

对象可以同时有多种类型的属性名索引，比如同时有数值索引和字符串索引。

数值索引不能与字符串索引发生冲突，必须服从后者。因为在 JavaScript 语言内部，所有的数值属性名都会自动转为字符串属性名。

属性名的数值索引不宜用来声明数组，因为采用这种方式声明数组，就不能使用各种数组方法以及 length 属性，因为类型里面没有定义这些东西。

type MyArr = { [n: number]: number; }; const arr: MyArr = [1, 2, 3]; arr.length; // 报错 解构赋值

解构赋值的类型写法，跟为对象声明类型是一样的。

const { id, name, price, }: { id: string; name: string; price: number; } = product;

:::tip 目前没法为解构变量指定类型，因为对象解构里面的冒号，JavaScript 指定了作为解构变量的别名。 :::

let { x: foo, y: bar } = obj; // 等同于 let foo = obj.x; let bar = obj.y; 结构类型原则

只要对象 B 满足 对象 A 的结构特征，TypeScript 就认为对象 B 兼容对象 A 的类型，这称为“结构类型”原则（structural typing）。

type A = { x: number; }; type B = { x: number; y: number; };

只要可以使用 A 的地方，就可以使用 B。

:::tip 如果类型 B 可以赋值给类型 A，TypeScript 就认为 B 是 A 的子类型（subtyping），A 是 B 的父类型。子类型满足父类型的所有结构特征，同时还具有自己的特征。凡是可以使用父类型的地方，都可以使用子类型，即子类型兼容父类型。 :::

严格字面量检查

如果对象使用字面量表示，会触发 TypeScript 的严格字面量检查（strict object literal checking）。如果字面量的结构跟类型定义的不一样（比如多出了未定义的属性），就会报错。

const point: { x: number; y: number; } = { x: 1, y: 1, z: 1, // 报错 };

如果等号右边不是字面量，而是一个变量，根据结构类型原则，是不会报错的。

const myPoint = { x: 1, y: 1, z: 1, }; const point: { x: number; y: number; } = myPoint; // 正确

如果允许字面量有多余属性，可以像下面这样在类型里面定义一个通用属性。

let x: { foo: number; [x: string]: any; }; x = { foo: 1, baz: 2 }; // Ok 最小可选属性规则

根据“结构类型”原则，如果一个对象的所有属性都是可选的，那么其他对象跟它都是结构类似的。

为了避免这种情况，TypeScript 2.4 引入了一个“最小可选属性规则”，也称为“弱类型检测”（weak type detection）。

如果某个类型的所有属性都是可选的，那么该类型的对象必须至少存在一个可选属性，不能所有可选属性都不存在。这就叫做“最小可选属性规则”。

空对象

空对象是 TypeScript 的一种特殊值，也是一种特殊类型。

const obj = {}; obj.prop = 123; // 报错 obj.toString(); // 正确

原因是这时 TypeScript 会推断变量 obj 的类型为空对象，实际执行的是下面的代码。

const obj: {} = {};

空对象没有自定义属性，所以对自定义属性赋值就会报错。空对象只能使用继承的属性，即继承自原型对象 Object.prototype 的属性。

TypeScript 不允许动态添加属性，所以对象不能分步生成，必须生成时一次性声明所有属性。

如果确实需要分步声明，一个比较好的方法是，使用扩展运算符（…）合成一个新对象。

空对象作为类型，其实是 Object 类型的简写形式。