Typescript-7.泛型

最新推荐文章于 2025-06-18 09:39:08 发布

l_vaule

最新推荐文章于 2025-06-18 09:39:08 发布

阅读量964

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/l_vaule/article/details/80406587

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了TypeScript中的泛型概念，包括如何使用泛型函数、泛型类型、不同参数名的泛型以及泛型接口。示例中展示了泛型在类类型的使用，特别是如何在工厂函数中应用泛型，确保类型安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

泛型之Hello World

function identity(arg:number):number{
	return arg;
}
function identity(arg:any):any{
	return arg;
}

function identity<T>(arg:T):T{
	return arg;
}
let ide = identity<String>("my name is danny");
let myIden = identity("my name is danny");

使用泛型变量
使用泛型创建像identity这样的泛型函数时，
编译器要求你在函数体必须正确的使用这个通用的类型。
换句话说，你必须把这些参数当做是任意类型或者所有类型，即泛型擦除。

function log<T>(arg: T[]):T[]{
	//....
}
function log<T>(arg: Array<T>):Array<T>{
	//....
}

泛型类型

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

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上即可。

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

我们还可以使用带有调用签名的对象字面量来定义泛型函数：

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

这引导我们去写一个泛型接口了。

interface GenericIdentityFn{
		<T>(arg: T): T;
}
function identity<T>(arg: T): T{
	return arg;
}
let myIdentity: GenericIdentityFn = identity;
interface GenericIdentityFn{
	<T>(arg: T): T;
}
function identity<T>(agr: T): T{
	return arg;
}

在泛型里使用类类型
在ts使用泛型创建工厂函数时，需要引用构造函数的类类型。
比如，

function create<T>(
c: {new(): T;}):T{
	return new c();
}

一个更高级的例子，使用原型属性推断并约束构造函数与类实例的关系。

class BeeKeeper{
	hasMask: boolean;
}
class Zookeeper{
	nametag: string;
}
class Animal{
	numLegs: number;
}

class Bee extends Animal{
	keeper: BeeKeeper;
}
class Lion extends Animal {
    keeper: ZooKeeper;
}

function createInstance<A extends Animal>(c: new () => A):A{
	return new c();
}
createInstance(Lion).keeper.nametag;  // typechecks!
createInstance(Bee).keeper.hasMask;   // typechecks!