泛型接口

本课属于 Coddy JavaScript 学习旅程的“TypeScript 入门”单元。第 61 课，共 73 课。

就像你可以创建泛型函数一样，也可以创建泛型接口。这样，你就能定义对象的结构，同时让某些属性类型保持灵活并可重复使用。

下面介绍如何使用相同的类型参数语法创建泛型接口：

interface Container<T> {
  value: T;
  isEmpty: boolean;
}

接口名称后的 <T> 会创建一个类型参数，可在整个接口定义中使用。在这个示例中，使用接口时，value 属性的类型由你指定，而 isEmpty 始终是固定的 boolean 类型。

使用泛型接口时，你需要在尖括号中指定具体类型：

const stringContainer: Container<string> = {
  value: "hello",
  isEmpty: false
};
const numberContainer: Container<number> = {
  value: 42,
  isEmpty: false
};

挑战

简单

创建一个名为 Result 的泛型接口，用于存放任意类型的数据以及成功信息。

该接口应包含两个属性：

类型为 boolean 的 success
类型为 T 的 data（泛型类型参数）

使用这个泛型接口创建以下对象：

类型为 Result<string> 的 stringResult，其中 success: true，data: "Operation completed"
类型为 Result<number> 的 numberResult，其中 success: true，data: 42
类型为 Result<boolean> 的 booleanResult，其中 success: false，data: false
类型为 Result<string[]> 的 arrayResult，其中 success: true，data: ["item1", "item2", "item3"]

创建一个名为 processResult 的泛型函数，该函数：

使用泛型类型参数 T
接收一个类型为 Result<T> 的参数 result
返回一条字符串消息
如果 success 为 true，则返回 "Success: [data]"
如果 success 为 false，则返回 "Failed: [data]"

打印以下输出：

打印使用 stringResult 调用 processResult 的结果
打印使用 numberResult 调用 processResult 的结果
打印使用 booleanResult 调用 processResult 的结果
打印使用 arrayResult 调用 processResult 的结果
打印 stringResult.data

亲手试试

// TODO: 在这里编写你的代码

// 创建泛型 Result 接口


// 使用 Result 接口创建对象


// 创建泛型 processResult 函数


// 打印要求的输出

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

TypeScript 入门中的所有课

自己练习： TypeScript 在线编辑器