TS泛型的使用

typescript 专栏收录该内容
1 篇文章 0 订阅

1、什么是泛型?

泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候在指定类型的一直特征。

2、为什么要使用泛型

因为any会在调试中丢失很多的信息,所以我们不建议使用any,这个时候应该有更好的解决方案,那就是泛型。

3、简单的泛型使用

	function getT(arg:any):any{
	return arg
}
getT('1') //这个时候如果接收一下的话
const a = getT('1') //a 的类型就是 any
相当于
const a : any //但是如果你 typeof a  还是和 getT的参数保持一致

深入解释:
我们在传参的时候可以看出我们传的是String类型的参数,但是返回的a还是any,这就说明类型丢失了。
但是我们又想传入的参数和返回的参数的类型保持一致,这个时候就需要泛型帮我们解决了

function echo<T>(arg:T):T{
	return arg
}
const str:string = '你好啊泛型 我是 String 类型的值'
const result = echo(str) // 这个时候就相当于是  const result : string 了

解释:在echo函数的声明中我们在函数名后使用<>声明了一个名为T类型的类型变量,并把入参和返回类型都声明为T,在调用的时候传入类型为string的参数,IDE会自动进行类型推断,推断出返回值类型也为string。

当然我们在调用的时候也可以主动为泛型赋值

	function echo<T>(arg:T):T{
		return arg	
	}
	const str:string = '你好'
	const res = echo<string>(str)  //这样的话 返回的就是 const res:string 了
	

4、泛型的约束

当我们使用泛型时,在代码中访问被泛型类型的变量时,容易出现各种各样的报错,这个时候我们需要对泛型进行约束,告知代码被赋予泛型类型的变量拥有些什么。

	function echo<T>(arg:T):T{
		console.log(arg.length) // 这个时候会报错 (类型T上不存在属性length)
		return arg
	}

这里我们让泛型继承一个接口,对泛型进行约束

	interface echoLength {
		length:number
	}
	function echo<T extends echoLength>(arg:T):T{
	console.log(arg.length)
	return arg
}
var a:string = '你'
var result = echo(a)
console.log(result.length); // 2 长度为2

//当然传入的参数 在js本身中 也需要拥有 length这个属性 ,你不能传入一个 number的属性去length

5、泛型在类中的使用


	class Stack<T>{
		private data = []
		push(item:T){
			return this.data.push(data)
		}
		pop(){
			const last = this.data.pop()
			return last.length
		}
	}
const stack = new Stack<string>('I AM STRING ')

//这个方法和泛型的基本使用差不多,方法一样

6、泛型在接口中的使用

我们在很多的情况下会用到类似于{key,value}这样的数据结构,比如select,radio等等的option中,而key,value的类型可能并不固定,我们可以使用接口和泛型,将类型抽象出来。

interface keypair<T,U>{
	key:T,
	value:U
}
const kp1:keypair<number,string> = {key:1,value:'1'}
const kep2:keypair<number,number> = {key:1,value:1}

从上面的例子可以看出,接口中使用泛型的方法和在类在函数中的使用方法类似,
在声明接口时去声明两个泛型变量,在使用接口的时候传入具体类型即可。

总结:没有真实项目开发过,许多的问题一定是没法发现的,只能边用边遇到问题,在解决吧。

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

屈小康

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值