TypeScript Academy · 课时

泛型

Q: 「泛型」这节课中我会学到什么？

学习如何使用泛型创建可复用组件 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习如何使用泛型创建可复用组件

泛型是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

泛型简介

泛型

欢迎来到下一课！本课将介绍泛型。泛型是 TypeScript 中的一项强大功能，可以帮助您创建可复用且类型安全的组件。让我们开始吧！

什么是泛型

什么是泛型？

泛型让您能够编写适用于任意类型的可复用代码。泛型充当类型的占位符，您可以在使用时指定具体类型。

示例：一个泛型函数：

任务：编写一个泛型函数，接收一个参数并原样返回该参数。

function identity<T>(value: T): T {
  return value;
}

console.log(identity<string>("Hello")); 
// Output: Hello
console.log(identity<number>(42)); 
// Output: 42

为什么使用泛型

为什么使用泛型？

泛型可以帮助您：

编写可复用的代码：函数和类可以处理不同的类型。
确保类型安全：您可以强制使用特定类型，同时不牺牲灵活性。
减少冗余：避免针对不同类型为同一个函数或类编写多个版本。

提示：使用泛型编写更灵活、更易维护的代码。

泛型函数

您可以使用泛型创建灵活的函数。示例：

任务：编写一个泛型函数，合并两个对象并返回结果。

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

let merged = merge({ name: "Alice" }, { age: 25 });
console.log(merged); 
// Output: { name: "Alice", age: 25 }

泛型类

可以在类中使用泛型，使类能够复用于不同类型。示例：

class Box<T> {
  private contents: T;

  constructor(contents: T) {
    this.contents = contents;
  }

  getContents(): T {
    return this.contents;
  }
}

let stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); 
// Output: Hello

let numberBox = new Box<number>(42);
console.log(numberBox.getContents()); 
// Output: 42

泛型接口

接口也可以使用泛型，为不同类型强制规定结构。示例：

任务：定义一个泛型接口，并创建一个实现该接口的对象。

interface Pair<T, U> {
  first: T;
  second: U;
}

let coordinates: Pair<number, number> = { first: 10, second: 20 };
console.log(coordinates); 
// Output: { first: 10, second: 20 }

泛型约束

您可以为泛型添加约束，确保它们只能与特定类型一起使用。示例：

function printLength<T extends { length: number }>(item: T): void {
  console.log(`Length: ${item.length}`);
}

printLength("Hello"); 
// Output: Length: 5
printLength([1, 2, 3]); 
// Output: Length: 3
// printLength(42); 
// Error: Argument of type 'number' is not assignable to parameter of type '{ length: number }'.

泛型默认值

如果未提供类型，您可以为泛型指定默认类型。示例：

任务：创建一个带有默认类型的泛型函数，并使用不同类型对其进行测试。

function wrap<T = string>(value: T): T[] {
  return [value];
}

console.log(wrap("Hello")); // Output: ["Hello"]
console.log(wrap(42)); // Output: [42]

太棒了！

恭喜您！您已经学会了如何在 TypeScript 中使用泛型创建可复用且类型安全的函数、类和接口。泛型是编写灵活且可扩展代码的强大工具。在下一课中，我们将探索高级类型，例如映射类型和条件类型。让我们继续编写代码吧！

常见问题解答

「泛型」课时是免费的吗？

是的 — 「泛型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「泛型」这节课中我会学到什么？

学习如何使用泛型创建可复用组件你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「泛型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy