Typescript 中的泛型是什么 - 为什么使用它们，它们如何与代码示例一起使用

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签示例

介绍

什么是泛型？

typescript 中的泛型提供了一种创建可以使用多种类型而不是单一类型的组件的方法。它们允许您定义针对不同数据类型灵活且可重用的函数、类或接口，同时保持强大的类型安全性。

本质上，泛型使您能够编写能够适应不同类型的代码，而不会失去 typescript 类型系统的优势。这种灵活性有助于构建健壮且可维护的代码，可以处理各种场景。

为什么使用泛型？

代码可重用性：

泛型允许您编写可以操作多种类型的函数、类或接口，而无需重复代码。您可以使用适用于任何类型的单个通用版本，而不是为每种类型创建单独的函数版本。

    function identity<t>(arg: t): t {    return arg;    }    console.log(identity<string>("hello")); // works with strings    console.log(identity<number>(42)); // works with numbers</number></string></t>

在这个例子中，恒等函数是通用的。它可以接受并返回任何类型 t，使其可重用于不同的数据类型。

类型安全

泛型确保您的代码在提供灵活性的同时保持类型安全。当您使用泛型时，typescript 会检查传递给泛型组件的类型是否一致，从而减少出现运行时错误的可能性。

   function wrapinarray<t>(value: t): t[] {    return [value];    }    const stringarray = wrapinarray("hello"); // typescript knows this is a string array    const numberarray = wrapinarray(42); // typescript knows this is a number array</t>

这里，wrapinarray 返回一个包含所提供值的数组，typescript 确保数组的类型与值类型一致。

避免冗余

如果没有泛型，您最终可能会编写同一函数或类的多个版本来处理不同的类型。泛型消除了这种冗余，从而产生更干净、更易于维护的代码。

没有泛型的示例：

   function logstring(value: string): void {    console.log(value);    }    function lognumber(value: number): void {    console.log(value);    }

泛型示例：

   function logvalue<t>(value: t): void {    console.log(value);    }    logvalue("hello"); // works with strings    logvalue(42); // works with numbers</t>

使用泛型，logvalue 函数可以处理任何类型，从而减少为每种类型编写单独函数的需要。

泛型在 typescript 中如何工作

泛型的基本语法

typescript 中的泛型使用占位符语法，通常用表示，其中 t 代表“类型”。这允许您定义可以对各种数据类型进行操作而不会失去类型安全性的函数、类或接口。

function identity<t>(value: t): t {    return value;}const stringidentity = identity("hello world");const numberidentity = identity(42);</t>

通用函数

泛型函数是可以处理多种类型而无需重复代码的函数。

function wrapinarray<t>(value: t): t[] {    return [value];}const stringarray = wrapinarray("hello");const numberarray = wrapinarray(123);</t>

在此示例中，wrapinarray 函数将任何值包装在数组中。 typescript 在调用函数时推断类型，确保数组包含正确的类型。

通用接口

通用接口允许您定义可应用于不同类型的合约。

示例：

interface pair<t u> {    first: t;    second: u;}const nameagepair: pair<string number> = {    first: "alice",    second: 30,};</string></t>

通用类

泛型类对于创建可以存储或管理任何类型数据的数据结构非常有用。
示例：

class box<t> {    contents: t;    constructor(value: t) {        this.contents = value;    }    getcontents(): t {        return this.contents;    }}const stringbox = new box("gift");const numberbox = new box(100);</t>

说明：在此 box 类中，类型 t 允许该类存储和检索任何类型的数据。这种方法类似于您在现实生活中使用存储容器的方式，其中容器的形状（类型）可以根据其内容而变化。

通用约束

有时，您想要限制泛型可以接受的类型。这就是通用约束的用武之地。

function getproperty<t k extends keyof t>(obj: t, key: k) {    return obj[key];}const car = { make: "toyota", year: 2022 };const make = getproperty(car, "make"); // validconst year = getproperty(car, "year"); // valid</t>

在此示例中，getproperty 函数确保您传递的键必须是对象的有效属性。此约束通过强制密钥存在于给定对象上来帮助防止错误。

泛型的常见用例

使用数组和集合

泛型在处理数组或数据集合时特别有用，其中元素的类型可能会有所不同。

function mergearrays<t>(arr1: t[], arr2: t[]): t[] {    return arr1.concat(arr2);}const numbers = mergearrays([1, 2, 3], [4, 5, 6]);const strings = mergearrays(["a", "b", "c"], ["d", "e", "f"]);</t>

在此示例中，mergearrays 函数使用泛型类型 t 来合并任意类型的两个数组。无论数组包含数字、字符串还是任何其他类型，该函数都能无缝处理它们。

将其想象为组合两盒物品（例如水果或工具）。盒子内的物品类型可能有所不同，但组合它们的过程保持不变。

api响应处理

处理api响应时，不同端点返回的数据结构可能会有所不同。泛型可以通过创建适用于各种类型的灵活函数来简化对这些响应的处理。

interface apiresponse<t> {    status: number;    data: t;    message?: string;}function handleapiresponse<t>(response: apiresponse<t>): t {    if (response.status === 200) {        return response.data;    } else {        throw new error(response.message || "api error");    }}const userresponse = handleapiresponse({    status: 200,    data: { name: "john", age: 30 },});const productresponse = handleapiresponse({    status: 200,    data: { id: 1, name: "laptop" },});</t></t></t>

在此示例中，handleapiresponse 函数适用于任何类型的 api 响应，无论是用户数据、产品详细信息还是其他内容。泛型类型 t 确保函数根据响应返回正确类型的数据。

想象一下在您家门口收到不同的包裹（api 响应）。内容可能有所不同（例如杂货、电子产品），但您有一种方法可以根据里面的内容正确打开每件商品的包装。

实用程序类型

typescript 提供了多种实用程序类型，它们在底层使用泛型来执行常见的类型转换。这些实用程序类型对于塑造和控制代码中的类型非常有用。

示例：

partial：使 t 中的所有属性可选。

interface user {    name: string;    age: number;    email: string;}const updateuser: partial<user> = {    email: "newemail@example.com",};</user>

readonly：使 t 中的所有属性只读。

const user: readonly<user> = {    name: "john",    age: 30,    email: "john@example.com",};// user.age = 31; // error: cannot assign to 'age' because it is a read-only property.</user>

record：构造一个属性键为k、属性值为t的对象类型。

   const rolepermissions: record<string string> = {    admin: ["create", "edit", "delete"],    user: ["view", "comment"],};</string>

这些实用程序类型（部分、只读、记录）是使用泛型构建的，以提供灵活且可重用的类型转换。它们有助于更新对象的某些部分、确保不变性或在 typescript 中创建字典/映射等场景。

泛型高级主题

多种类型参数

typescript 允许在函数或类中使用多个类型参数，从而实现更大的灵活性并控制不同类型在代码中的交互方式。

function mergeobjects<t u>(obj1: t, obj2: u): t &amp; u {    return { ...obj1, ...obj2 };}const person = { name: "alice" };const contact = { email: "alice@example.com" };const merged = mergeobjects(person, contact);// merged is of type { name: string } &amp; { email: string }</t>

在此示例中，mergeobjects 函数使用两个泛型类型参数 t 和 u 来合并两个对象。生成的对象结合了两个输入对象的属性，并使用 typescript 确保为合并结果推断出正确的类型

默认通用类型

typescript 还允许您定义泛型参数的默认类型。如果没有明确提供，此功能会提供后备类型，从而简化代码中泛型的使用。

function createpair<t string>(value1: t, value2: t): [t, t] {    return [value1, value2];}const stringpair = createpair("hello", "world"); // defaults to [string, string]const numberpair = createpair<number>(10, 20); // explicitly set to [number, number]</number></t>

createpair 函数的泛型类型 t 有一个默认的字符串类型。如果未指定类型，typescript 将使用字符串，但您可以在必要时通过提供不同的类型来覆盖它。

使用泛型进行类型推断

typescript 能够根据函数或类的使用方式推断泛型的类型。这减少了显式指定类型的需要，使代码更加简洁且更易于使用。

function wrapinarray<t>(value: t): t[] {    return [value];}const numberarray = wrapinarray(42); // typescript infers t as numberconst stringarray = wrapinarray("hello"); // typescript infers t as string</t>

说明：在wrapinarray函数中，typescript根据传递给函数的参数类型自动推断t的类型。这种推断类型的能力使泛型更加强大且易于使用，因为它通常消除了对显式类型注释的需要。

常见陷阱和最佳实践

过度使用泛型

虽然泛型是一个强大的功能，但它们有时可能会被过度使用，导致代码不必要地复杂且难以理解。

function overlygenericfunction<t u>(param1: t, param2: u): [t, u] {    return [param1, param2];}</t>

在此示例中，该函数是通用的，但如果逻辑实际上并不依赖于它们是不同的类型，则可能不需要使用两个类型参数。这会使代码更难阅读和维护。

最佳实践：当泛型提供明显的好处时，例如当类型真正灵活且多样时，请使用泛型。如果特定类型或简单的联合类型也能完成这项工作，那么通常最好使用它们。

平衡灵活性和复杂性

泛型提供了灵活性，但平衡灵活性和简单性至关重要。使用泛型使代码过于复杂可能会使其更难以理解和维护。

温馨提示：

避免任何

在 typescript 中使用 any 会很快破坏该语言提供的类型安全性。泛型提供了一种更安全的替代方案，使您能够保持灵活性，同时仍然受益于 typescript 的类型系统。

function logValue(value: any): void {    console.log(value);}function logGenericValue<t>(value: T): void {    console.log(value);}</t>

在第一个函数中，使用 any 意味着 typescript 不会检查值的类型，可能会导致运行时错误。相比之下，第二个函数使用泛型类型 t，在保持类型安全的同时仍然灵活。

最佳实践：只要需要灵活性，就优先选择泛型。这种方法可确保 typescript 继续强制执行类型安全，降低错误风险，并使您的代码更可预测且更易于调试。

结论

typescript 中的泛型是创建可重用、灵活且类型安全的代码的强大工具。它们允许您编写可与多种类型一起使用的函数、类和接口，从而减少冗余并增强代码可维护性。通过使用泛型，您可以避免任何陷阱，保持代码类型安全，并保持清晰和简单。

泛型在 typescript 中开辟了一个充满可能性的世界，使编写适应性强且可重用的代码变得更加容易。我鼓励您探索如何在您的项目中应用泛型。无论您是处理 api 响应、使用集合还是创建实用函数，泛型都可以显着提高代码的灵活性和健壮性。

文章推荐