typescript中泛型的工作原理 – 通过示例解释

前端孺子牛
205 阅读4分钟

typescript中泛型的工作原理 – 通过示例解释

TypeScript 凭借其强大的类型系统，提供了一项称为泛型的功能，它使开发人员能够编写可重用和类型安全的代码。泛型允许您创建可以处理多种类型而不是单一类型的组件。

本文深入探讨了 TypeScript 泛型，提供了详尽的解释和代码示例来说明它们的用法和好处。

您可以从这里获取所有源代码。 here.

什么是泛型？

TypeScript 中的泛型支持编写可处理各种数据类型的代码，同时保持类型安全。它们允许在不牺牲类型检查的情况下创建可重用的组件、函数和数据结构。

泛型由类型参数表示，类型参数充当类型的占位符。这些参数在尖括号 （ <> ） 中指定，并可在整个代码中用于定义变量类型、函数参数、返回类型等。

泛型用例

 泛型的基本用法

让我们从泛型函数的简单示例开始：

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

let output = identity<string>("hello");
console.log(output); // Output: hello

在此示例中， identity 是一个采用类型参数的泛型函数 T 。参数的类型 arg T 为 ，函数的返回类型也是 T 。调用 identity<string>("hello") 时，类型参数 T 推断为 string ，确保类型安全。

如何使用泛型类

泛型不仅限于函数，它们还可以与类一起使用。请考虑以下泛型 Box 类示例：

class Box<T> {
    private value: T;

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

    getValue(): T {
        return this.value;
    }
}

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

这里， Box 是一个带有类型参数的泛型类 T 。构造函数采用类型 T 为 的值，该 getValue 方法返回类型 T 为 的值。创建 的 Box<number> 实例时，它只能存储和返回 类型的 number 值。

如何对泛型应用约束

有时，您可能希望限制可用于泛型的类型。TypeScript 允许您使用 extends 关键字指定对类型参数的约束。让我们看一个例子：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

let result = loggingIdentity("hello");
console.log(result); // Output: hello

nt allows accessing the length property without causing a compilation error.
在此示例中，该 loggingIdentity 函数采用必须扩展接口的 Lengthwise 类型参数，该参数 T 可确保 arg 该接口具有属性 length 。此约束允许在不导致编译错误的情况下访问 length 该属性。

如何将泛型与接口一起使用

泛型还可以与接口一起使用，以创建灵活且可重用的定义。请看以下示例：

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

let pair: Pair<number, string> = { first: 1, second: "two" };
console.log(pair); // Output: { first: 1, second: "two" }

这里， Pair 是一个包含两个类型参数 T 和 U 的接口，分别表示 first 和 second 属性的类型。声明 pair 为 Pair<number, string> 时，它强制 first 要求属性必须是数字，并且属性 second 必须是字符串。

如何将泛型函数与数组一起使用

function reverse<T>(array: T[]): T[] {
    return array.reverse();
}

let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers: number[] = reverse(numbers);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]

在此示例中，该 reverse 函数采用一个类型的 T 数组，并返回一个相同类型的反向数组。通过使用泛型，该函数可以处理任何类型的数组，从而确保类型安全。

 如何使用泛型约束 keyof

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

let person = { name: "John", age: 30, city: "New York" };
let age: number = getProperty(person, "age");
console.log(age); // Output: 30

在这里，函数 getProperty 采用一个类型 T 为 的对象和一个类型 K 为 的键，其中 K 扩展了 的 T 键。然后，它从对象返回相应的属性值。此示例演示如何在访问对象属性时使用泛型 with keyof 来强制实施类型安全。

如何使用泛型实用程序函数

function toArray<T>(value: T): T[] {
    return [value];
}

let numberArray: number[] = toArray(42);
console.log(numberArray); // Output: [42]

let stringArray: string[] = toArray("hello");
console.log(stringArray); // Output: ["hello"]

该 toArray 函数将类型的 T 单个值转换为包含该值的数组。这个简单的实用函数展示了如何使用泛型来创建可重用的代码，这些代码可以毫不费力地适应不同的数据类型。

如何将泛型接口与函数一起使用

interface Transformer<T, U> {
    (input: T): U;
}

function uppercase(input: string): string {
    return input.toUpperCase();
}

let transform: Transformer<string, string> = uppercase;
console.log(transform("hello")); // Output: HELLO

在此示例中，我们定义了一个 Transformer 具有两个类型参数 T 和 U 的接口，分别表示输入和输出类型。然后我们声明一个函数 uppercase 并将其分配给 类型的 Transformer<string, string> 变量 transform 。这演示了如何使用泛型来定义函数的灵活接口。

Conclusion 结论

无论是函数、类还是接口，泛型都为构建可扩展和可维护的 TypeScript 应用程序提供了一种强大的机制。理解和掌握泛型可以显著提高编写高效且无差错代码的能力。

avatar
文章
阅读
粉丝