在 TypeScript 中，对象类型是一个核心概念，它帮助开发者更好地定义和操作数据结构。与 JavaScript 相同，TypeScript 中的对象也是一种存储和传递数据的主要方式。TypeScript 为此提供了多种方式来声明对象类型，本文将深入探讨对象类型的不同声明方式、属性修饰符、索引签名等关键内容，帮助你全面理解如何在 TypeScript 中使用对象类型。

一、对象类型的基本用法

在 TypeScript 中，对象类型可以通过匿名类型、interface（接口）或 type（类型别名）来定义对象结构。来看几个常见的例子。

1. 匿名对象类型

我们可以在函数参数中直接声明一个匿名的对象类型：

function greet(person: {
    
     name: string; age: number }) {
    
    
  return "Hello " + person.name;
}

在这个例子中，函数 greet 的参数是一个对象类型，要求 person 对象必须包含 name 和 age 两个属性，并且属性 name 必须是字符串，age 必须是数字。

2. 使用接口声明对象类型

通过 interface 关键字，我们可以给对象类型命名，使其可以在多个地方复用。

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

function greet(person: Person) {
    
    
  return "Hello " + person.name;
}

接口 Person 规定了对象必须具有 name 和 age 两个属性。接口在 TypeScript 中被广泛应用于定义对象结构，尤其是在大型项目中，这种方式可以提升代码的可读性和可维护性。

3. 使用类型别名声明对象类型

type 关键字可以用来创建对象类型的别名，与接口类似：

type Person = {
    
    
  name: string;
  age: number;
};

function greet(person: Person) {
    
    
  return "Hello " + person.name;
}

type 和 interface 在某些场景下具有相似的功能，但它们也有各自的特点与差异，稍后我们将深入探讨。

二、属性修饰符详解

在 TypeScript 中，每个对象属性都可以通过修饰符来指定该属性的类型、可选性以及是否只读。这些修饰符在定义对象类型时非常重要。

1. 可选属性

在很多情况下，对象的某些属性可能是可选的。我们可以通过在属性名后面加上问号 ?，将该属性标记为可选属性。

interface PaintOptions {
    
    
  shape: string;
  xPos?: number;
  yPos?: number;
}

function paintShape(opts: PaintOptions) {
    
    
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
}

在这个例子中，xPos 和 yPos 是可选的，这意味着 paintShape 函数既可以接受仅包含 shape 属性的对象，也可以接受包含 xPos 或 yPos 的对象。可选属性为开发者提供了更灵活的对象定义方式。

2. 只读属性

readonly 修饰符可以使对象的某些属性在定义后无法被修改。虽然在运行时不会阻止修改，但在编译时，TypeScript 会确保该属性无法被重新赋值。

interface SomeType {
    
    
  readonly prop: string;
}

function doSomething(obj: SomeType) {
    
    
  console.log(`prop has the value '${
      
      obj.prop}'`);
  obj.prop = "hello";  // 这里会报错，因为 prop 是只读的
}

这种方式非常适合用来定义一些不可变的对象属性，避免了意外的修改操作。

三、接口与类型别名的区别

在 TypeScript 中，接口 interface 和类型别名 type 都可以用来定义对象类型，二者在大多数情况下是可以互换的。但在某些特定场景下，它们具有不同的特性和应用。

1. 扩展与实现

接口可以通过 extends 进行扩展，允许创建新的接口：

interface Animal {
    
    
  name: string;
}

interface Dog extends Animal {
    
    
  breed: string;
}

类型别名则可以使用交叉类型来进行扩展：

type Animal = {
    
    
  name: string;
};

type Dog = Animal & {
    
    
  breed: string;
};

2. 组合与重载

接口支持多次声明合并，而类型别名则不允许重复声明。

interface User {
    
    
  name: string;
}

interface User {
    
    
  age: number;
}

const user: User = {
    
     name: "Alice", age: 25 };  // 合并后的 User 既有 name 也有 age

类型别名如果尝试多次声明，则会报错。

3. 适用场景

• interface 更适合用于描述对象结构，特别是在定义复杂对象、类实现接口时，接口的语义更加明确。
• type 则适合用于组合类型、联合类型和映射类型等复杂类型的定义。

四、索引签名

在某些情况下，我们并不知道对象属性的具体名称，但我们可以通过索引签名来定义属性的类型。例如，当我们知道所有的属性都是字符串类型的值时，可以这样写：

interface StringArray {
    
    
  [index: number]: string;
}

const myArray: StringArray = ["Alice", "Bob", "Charlie"];
const secondItem = myArray[1];  // "Bob"

索引签名在动态对象结构中非常有用，它允许我们灵活地访问对象的属性，特别是在处理字典模式的数据结构时。

1. 字符串索引签名

字符串索引允许我们通过字符串键访问对象属性：

interface NumberDictionary {
    
    
  [index: string]: number;
  length: number;
  name: string;  // 会报错，因为 name 不是 number 类型
}

在这个例子中，NumberDictionary 要求所有的属性值必须是 number 类型，但 name 是一个字符串，因此会导致错误。为了避免这种情况，我们可以使用联合类型：

interface NumberOrStringDictionary {
    
    
  [index: string]: number | string;
  length: number;  // 可以是 number
  name: string;    // 可以是 string
}

2. 只读索引签名

通过 readonly 修饰符，我们可以使索引签名变为只读，防止修改：

interface ReadonlyStringArray {
    
    
  readonly [index: number]: string;
}

let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[1] = "Charlie";  // 报错，因为索引是只读的

五、结论

TypeScript 的对象类型为开发者提供了强大的类型检查和灵活的类型定义方式。通过接口、类型别名、属性修饰符和索引签名等特性，我们可以精确地定义数据结构，确保代码的健壮性和可维护性。

推荐：

• JavaScript
• react
• vue

---