TypeScript泛型的学习心得 TypeScript泛型的使用方法

发布时间：2025-09-21 00:57:14 阅读量： 0 来源： 互联网转载

如果我们没有学过强类型语言的话，可能会没有太接触过泛型。泛型是在TS当中使用很广泛的一种数据类型的定义。什么是泛型呢？

我个人理解的在强类型语言中泛型是一种由我们自己定义的特定的数据类型，可以想象成是一种对象，也可以想想成一种数组其实都可以。请看下面的代码

{Uid:3,Name:"示例"}

上述的这个JSON数据，如果是在JS当中它的类型只能是OBJECT，那么在TS当中我们确可以把上面的代码自定义为一种数据类型，比如给上面的数据类型取一个名字为TempType，那么上面的代码Uid和Name就是该数据类型的属性，代码如下

type TempType={  Uid: number,  Name: string}

现在我们要使用这个数据类型代码如下

Let tmp:TempType={Uid:3,Name:"示例"}

那么变量tmp就受TempType类型的约束，不能像JS那样自由的添加属性了，如下图添加一个Test属性就会报错！

我们现在正式定义了一个TempType数据类型，接下来开始制作一个基于函数的泛型把。代码如下

function createPerson<T extends TempType>(parameter: T) {  return parameter;}

函数createPerson旁边的<>表明这是一个泛型T extends TempType 表明我们约束了T必须为TempType 类型。当然也可以直接写createPerson<T>这是代表我们并没有对T进行约束。T就可以是任意的类型，比如string number。当然这里有点绕，那么接下看看我们如何使用这个泛型，大家就明白了。代码如下

let tmp=createPerson<TempType>({Uid:3,Name:"示例"})

createPerson<TempType>({Uid:3,Name:"示例"})里<>填入TempType代表数据类型为TempType,而()里的参数parameter限定了T的参数类型为TempType所以我们填写{Uid:3,Name:"示例"}，那么最后变量tmp就能得到返回值{Uid:3,Name:"示例"}了。

上述是使用了限定的写法,当然createPerson函数里的T也可以是任意数据类型，现在重新写过代码如下

function createPerson<T>(p: T) {  return p;}let tmp=createPerson<string>("示例")

我们可以在控制台打印tmp获得字符串“示例”通过上述2个例子我们应该能了解到。函数createPerson通过<T>里输入类型。然后就可以再其他地方调用T。比如参数里的P:T里，p的类型就限定为T，而T的具体类型则由我们再实际调用中给定，createPerson<string>("示例")里，就指定了T的类型为string。

泛型里<>可以有多个类型，比如<N,S>下面我们做一个示例。我们将上述的TempType数据类型改为一个泛型，代码如下

type TempType<N,S>={  Uid: N,  Name: S}

改造好后使用它

let tmp:TempType<number, string>={Uid:3,Name:"示例"}

通过<number, string>指定了里面Uid和Name的类型。最后面给大家来一个复合型的代码如下图

最后的运行结果

其实，不知道大家感觉到没有。上一篇文章包括本篇文章，TS大部分再做的事情其实就是再做一个数据约束的工作。使用泛型其实也是让我们的程序数据解构更清晰

TypeScript自学心得分享 TypeScript与JavaScript对数据处理的对比自学TypeScript泛型的心得 TypeScript接口，枚举，类的总结 TypeScript实战项目中使用心得

上一篇: 大连网站建设关于网站的标题，实用才是王道

下一篇: 大连网站建设当前环境下外链对网站SEO到底还有没有作用？

TypeScript泛型的学习心得 TypeScript泛型的使用方法

热门文章