对象与接口

用精确的类型描述对象的形状，再用接口让它们可复用。

8 分钟 · 3 题

在 JavaScript 中，对象以键值对的形式把若干相关信息组合在一起，就像一张记录卡：一本书有标题和页数。在 TypeScript 中，你可以描述一个对象的确切形状：它包含哪些属性，以及每个属性是什么类型。

const book: { title: string; pages: number } = {
  title: "The Little Prince",
  pages: 96,
};

console.log(book.title); // "The Little Prince"

每次都把形状写出来很快就会变得重复。接口给这个形状起了一个名字，让你能到处复用它。你用 interface 关键字来声明它，后面跟一个名字（按惯例首字母大写），然后是属性列表及其类型。

interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};

接口的所有属性默认都是必填的：漏掉 servings 会触发一个错误。要让一个属性变为可选，就在它的名字后面紧接一个问号 ?。这样对象在创建时可以带上或不带上该属性。

interface Contact {
  name: string;
  phone: string;
  email?: string; // optional thanks to the ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // allowed: email can be omitted

知识检测

确认你已牢记本课的重点内容。

1. 在 TypeScript 中，接口有什么用？
   • 描述对象的形状并复用它
   • 创建一个网页
   • 让函数运行得更快
   • 在服务器上存储数据
2. email?: string 中的问号意味着什么？
   • email 属性是必填的
   • email 属性是可选的
   • email 属性总是空的
3. 一个类型为 Recipe 的对象缺少 name 属性。会发生什么？
   • TypeScript 在执行之前报告一个错误
   • 程序在运行时毫无预警地崩溃
   • TypeScript 自动补上该属性