在 TypeScript 中,泛型(Generics)是一种强大的特性,它允许我们在编写代码时声明一个通用的类型,以便我们可以在不同的地方使用该类型。
在本文中,我们将深入探讨 TypeScript 中的泛型,包括泛型类,泛型函数以及泛型约束等方面。
泛型类
在 TypeScript 中,我们可以定义一个泛型类,如下所示:
-- -------------------- ---- ------- ----- --------------- - ------- ----- --- - --- ---------- -- - --------------------- - ----- - ------ ---------------- - -
在泛型类中,我们使用 <T>
来表示泛型类型。在上面的示例中,我们声明的泛型类名为 GenericClass
,并使用 <T>
声明了一个泛型类型参数。在类中,我们可以使用该泛型类型参数来定义成员变量和成员方法。
示例代码:
const generic = new GenericClass<string>(); generic.push("foo"); generic.push("bar"); console.log(generic.pop()); // bar
在上面的示例代码中,我们创建了一个 GenericClass
的实例,并将泛型类型参数设为 string
。然后我们通过调用 push
方法向实例中添加了两个字符串,最后通过调用 pop
方法取出了最后一个字符串 "bar"。
泛型函数
在 TypeScript 中,我们还可以定义一个泛型函数,如下所示:
function genericFunction<T>(arg: T): T { return arg; }
在泛型函数中,我们同样使用 <T>
来声明泛型类型参数。在上面的示例中,我们定义了一个泛型函数名为 genericFunction
,并为其定义了一个泛型类型参数 T
。该函数接收一个参数 arg
,类型为 T
,并返回一个参数 arg
,类型也为 T
。
示例代码:
console.log(genericFunction<string>("hello")); // hello console.log(genericFunction<number>(42)); // 42
在上面的示例代码中,我们分别调用了 genericFunction
并传入了一个字符串和一个数字。由于我们在调用函数时对泛型类型参数做了具体化的定义,因此在函数作用域内的参数 arg
可以正确地推断出其类型。
泛型约束
在 TypeScript 中,我们可以通过泛型约束来限制泛型类型参数的类型。通常情况下,我们使用泛型约束来确保我们在调用泛型方法或泛型类时,传入的参数具有一些特定的属性或方法。
例如,我们可以创建一个泛型函数,这个函数接收一个有 length
属性的参数,并返回这个参数的长度:
interface HasLength { length: number; } function getLength<T extends HasLength>(arg: T): number { return arg.length; }
在上面的示例中,我们使用 extends
关键字来限制泛型类型的类型上界,使其必须继承 HasLength
接口,并具有 length
属性。然后我们定义了一个泛型函数 getLength
,并使用 <T extends HasLength>
来限定泛型类型参数的类型。该函数接收一个参数 arg
,类型为 T
,并返回该参数的 length
属性。
示例代码:
console.log(getLength("hello")); // 5 console.log(getLength([1, 2, 3])); // 3 console.log(getLength({ length: 10 })); // 10 console.log(getLength(42)); // 报错:类型“42”不满足接口“HasLength”的要求
在上面的示例中,我们分别传入了一个字符串、一个数组和一个对象,并调用了 getLength
方法获取这些参数的长度。注意,当我们传入一个不具有 length
属性的参数时,编译器会报错,提示我们该参数的类型不满足 HasLength
接口的要求。
总结
泛型在 TypeScript 中是一种非常有用的特性,它可以让我们编写更加通用、灵活的代码,并使得我们的代码在运行时更加类型安全。在使用泛型时,我们需要注意泛型的定义方式、使用方式以及泛型约束的限制等方面。
通过本文的介绍,我们对 TypeScript 中的泛型有了更深入的了解。我们可以通过定义泛型类、泛型函数以及使用泛型约束等方式,来编写更加灵活、通用的代码。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a5255b48841e989419bca1