本文主要是介绍vue3第三十五节（TS 之 泛型），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本节介绍 ts 中泛型的常用情景
1 什么是泛型
泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类、泛型接口、泛型方法。
泛型使用<T>来定义类型，<T>中的T，也可以是U也可以是其他合法的字母，建议大写。
泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。
2 泛型方法
比如我们定义一个 sum 方法
function sum(a:number): number {return a + a
}
这种定义的方法，我们传入的参数 a以及函数返回的数据 只能是 number 类型，不能是其他类型数据，否则会报错；但是我们通常需要的类型会很多，这时我们可以定义一个类似通用的函数；
可能有同学会说我们可以定义一个any 类型的呀，但是这样就违背我们使用ts的初衷了，
那么我们可以这样写
T:表示类型变量，而这个变量只能是 类型，而不是值；
function sum<T>(a:T):T{return a +a
}
那么我们在使用的时候可以这样写
const a = sum<string>('2')
// 4 指定泛型此时的类型是 string，则传入的值也必须是String类型
const b = sum<number>(4)
// 8 指定泛型此时 的类型是 number，则传入的值，以及返回的值均为 Number 类型数据
3 传入多个泛型
const fun = <T,U>(a:T, b:U) => {console.log(a, b)
}
此时的 a,b可以是不同的类型，也可以是相同的类型
使用
fun<string, number>('1', 2) // '1', 2传入的是a参数约定是 String类型b参数约定是 number 类型
4 常用的泛型名称
T：Type的缩写，类型
K、V：key和value的缩写，键值对
E：Element的缩写，元素
O：Object的缩写，对象
5 泛型接口
一般的函数接口我们这样定义
interface Person {(value1: string, value2: string): string;
}
当我们定义泛型函数接口时候可以这样写
interface Person<T> {(value: T): T;
}
或者
interface Person {<T>(value: T): T;
}
// 使用泛型 约定为 string类型
let nam: Person<string> = 'Andy'
定义一般泛型接口
还可以指定默认的类型
interface Person<T=string, U=number>{age: T;name: U;
}
6 泛型约束
比如我们想要传入的参数中有必须有某种类型
interface Say {length: number;
}
function Person<T extends Say>(arg: T) {console.log(arg.length);// 此时arg参数中必须含有 length属性，并且属性的类型是 number，否则就会报错
}
T extends表示传入的类型必须是extends后面的类型或者子类型。
例如：
Person({length:10, name: 'Andy'}) // 传入一个含有length 属性的数据
Person([1,2,3,4,5,6,7,8,9]) // 数组类型默认含有 length 属性
Person('123444') // String 类型数据自带 length 属性
这篇关于vue3第三十五节（TS 之 泛型）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
