TypeScript泛型及其一些写法

Vue3拥抱Typescript之泛型

// 平常写ts可能会这样注解类型,但是这样有些麻烦,能不能简洁点呢
//function joi(first: string | number,second: string | number){
//	return first + second
//}
// JJ是泛型,在最简单的泛型用法中可以类比形参理解,所以它可以是任意值
// 但一般用T表示
function joi<JJ>(first: JJ,second: JJ){
	return first + second
}
// JJ在这里是number
joi<number>(1,2)
// JJ在这里是string
joi<string>('1','2')

// 定义多个泛型
function joi<JJ,PP>(first: JJ,second: PP){
	return first + second
}
joi<string,number>('1',2)

// 类泛型
class SSS<T>{
	// g要求是T类型数组
	constructor (private g: T[]){} // GGG
	// GGG处的写法效果如下注释
	// private g
	// constructor (g: T[]){
	//		this.g = g
	//}
	getG(index:number):T{ //返回值需是T类型
		return this.g[index]
	}
}
// T为String
const s = new SSS<string>(['1','2','3'])
console.log(s.getG(0)) // ‘1’

// 泛型继承
interface S{
	name: string;
}
class SSS<T extends S>{ //泛型继承后必须有name值{ name: 'x'}格式
	// 请求一个【{name: string},{name: string}】格式数组
	constructor (private g: T[]){} 
	getG(index:number):string{
		return this.g[index].name
	}
}
// 因为使用了继承所以不用再指定类型
const s = new SSS([
	{name: '1'},
	{name: '2'},
	{name: '3'}
])
console.log(s.getG(0)) // ‘1’

// 泛型约束
class SSS<T extends number | string>{// T被约束为number | string
	constructor (private g: T[]){
		
	}
	getG(index:number):T{
		return this.g[index]
	}
}
const s = new SSS<string>(['1','2','3'])
console.log(s.getG(0)) // ‘1’

原文链接:https://blog.csdn.net/kyyius/article/details/109923694

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值