13_TypeScript 接口 --[深入浅出 TypeScript 测试]

TypeScript 接口（Interfaces）是用于定义对象的形状或结构的强大工具。接口可以用来描述对象的属性、方法以及它们的类型，确保代码在编译时就能捕捉到类型的错误。以下是关于 TypeScript 接口的一些关键概念和用法。

定义接口

你可以使用 interface 关键字来定义一个接口。接口可以包含属性和方法，并且每个成员都需要指定其类型。

// 定义一个接口 LabelledValue，要求对象必须包含一个名为 label 的字符串属性
interface LabelledValue {
   
    label: string;
}

// 定义一个函数 printLabel，接收一个符合 LabelledValue 接口的对象作为参数，并打印其 label 属性
function printLabel(labelledObj: LabelledValue) {
   
    console.log(labelledObj.label); // 打印对象的 label 属性
}

// 创建一个对象 myObj，包含 size 和 label 属性
let myObj = {
    size: 10, label: "Size 10 Object" };

// 调用 printLabel 函数，传入 myObj 对象，输出 "Size 10 Object"
printLabel(myObj); // 输出 "Size 10 Object"

在这个例子中，LabelledValue 接口定义了一个具有 label 属性的对象，该属性必须是字符串类型。

可选属性

接口中的属性可以是可选的，这意味着实现该接口的对象可以有也可以没有这些属性。

/**
 * 定义一个可选配置的接口，用于描述正方形的属性
 * 这个接口的属性都是可选的，意味着在实例化时可以不提供这些属性的值
 */
interface SquareConfig {
   
    // 颜色属性，表示正方形的颜色，是可选的
    color?: string;
    // 宽度属性，表示正方形的宽度，是可选的
    width?: number;
}

当然，下面是一个简单的示例，展示了如何在 TypeScript 接口中定义和使用可选属性。这个例子中我们将创建一个描述图书信息的接口，其中一些属性是必填的，而另一些则是可选的。

示例：定义带有可选属性的接口

// 定义 Book 接口，包含必填和可选属性
interface Book {
   
  title: string;           // 必填属性
  author: string;          // 必填属性
  publicationYear?: number; // 可选属性，出版年份
  pages?: number;          // 可选属性，页数
}

// 创建一个符合 Book 接口的对象，只提供必填属性
let book1: Book = {
   
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald"
};

console.log(book1);

// 创建另一个符合 Book 接口的对象，同时提供可选属性
let book2: Book = {
   
  title: "1984",
  author: "George Orwell",
  publicationYear: 1949,
  pages: 328
};

console.log(book2);

在这个例子中：

• title 和 author 是必填属性，必须为每个 Book 对象提供这些属性。
• publicationYear 和 pages 是可选属性（通过在属性名后加上 ? 表示），这意味着你可以选择性地提供这些信息。

输出结果：

{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
{ title: '1984', author: 'George Orwell', publicationYear: 1949, pages: 328 }

解释

• book1：这里我们只提供了 title 和 author 属性，因为 publicationYear 和 pages 是可选的，所以它们可以被省略。
• book2：除了必填属性外，还提供了两个可选属性 publicationYear 和 pages。

这种方式使得接口更加灵活，允许你在需要的时候提供额外的信息，而不强制要求每次都填写所有可能的属性。这在处理数据输入、配置对象或其他类似场景时非常有用。

只读属性

你可以使用 readonly 关键字来定义只读属性，这表示一旦赋值后就不能再修改。

/**
 * 定义一个不可变的二维点接口，包含两个只读属性
 */
interface Point {
   
    // x坐标，只读属性，一旦赋值后不能修改
    readonly x: number;
    // y坐标，只读属性，一旦赋值后不能修改
    readonly y: number;
}

let p1: Point = {
    x: 10, y: 20 };
// p1.x = 5; // 错误：无法分配给 'x'，因为它是只读属性

当然，下面是一个简单的示例，展示了如何在 TypeScript 接口中定义和使用只读属性。我们将创建一个描述用户信息的接口，其中包含一些只读属性，这些属性一旦被赋值后就不能再被修改。

示例：