Vue3拥抱Typescript之泛型

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')

---

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

---

typescript">// 类泛型
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’

---

typescript">// 泛型继承
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’

---

typescript">// 泛型约束
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