TypeScript 中的对象类型：深入理解接口和类型别名

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

在 TypeScript 中，对象是键值对的集合，每个键都是一个字符串（或符号），每个值可以是任何类型。TypeScript 提供了强大的类型系统，允许开发者定义对象的结构，从而提高代码的可读性和可维护性。

对象类型注解

在 TypeScript 中，你可以使用冒号 : 后跟类型来为对象添加类型注解。

let person: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

在这个例子中，person 对象被注解为具有 name 属性（类型为 string）和 age 属性（类型为 number）。

接口

接口（interface）是 TypeScript 中定义对象类型的一种方式。接口允许你定义一个对象的形状，即它应该具有哪些属性以及这些属性的类型。

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

let person: Person = {
  name: "Alice",
  age: 30
};

在这个例子中，Person 接口定义了一个对象的形状，然后我们创建了一个符合这个形状的对象。

类型别名

类型别名（type）是另一种定义对象类型的方式。类型别名允许你为类型定义一个新的名字。

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

let person: Person = {
  name: "Alice",
  age: 30
};

在这个例子中，Person 类型别名定义了一个对象的形状，然后我们创建了一个符合这个形状的对象。

可选属性

在接口和类型别名中，你可以使用 ? 来标记一个属性是可选的。

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

let person: Person = {
  name: "Alice"
};

在这个例子中，age 属性是可选的，因此我们可以创建一个没有 age 属性的对象。

只读属性

在接口和类型别名中，你可以使用 readonly 关键字来标记一个属性是只读的。

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

let person: Person = {
  name: "Alice",
  age: 30
};

person.name = "Bob"; // 错误，因为 name 属性是只读的

在这个例子中，name 属性是只读的，因此我们不能修改它的值。

索引签名

在接口和类型别名中，你可以使用索引签名来定义对象的索引类型。

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

let colors: StringArray = ["red", "green", "blue"];

在这个例子中，StringArray 接口定义了一个索引签名，表示这个对象是一个字符串数组。

结论

在 TypeScript 中，对象是键值对的集合，每个键都是一个字符串（或符号），每个值可以是任何类型。TypeScript 提供了接口和类型别名等工具，允许开发者定义对象的结构，从而提高代码的可读性和可维护性。通过使用 TypeScript，开发者可以创建更强大和灵活的代码，从而提高生产力和代码质量。