TypeScript学习8：泛型

函数泛型

引入需求

如果我们不使用泛型

我们会这样子去实现：

function numberArray(a1:number, a2:number):number[]{
    return [a1, a2]
}
function stringArray(a1:string, a2:string):string[]{
    return [a1, a2]
}

但是如果我还需要别的类型参数呢，比如bool值等，不断像上面这样创建类似的代码会让代码非常丑且冗余

所以这里我们需要用到泛型，简而言之，泛型就是把类型当做参数

和Java中的泛型原理是一样的！

那么我们使用泛型来实现上面这个需求就很简单了

function array<T>(a:T, b:T):T[]{
    return [a, b]
}

只需要在函数名后面加上尖括号就可以使用泛型了

使用这个方法也非常简单，给T赋值就行了：

console.log(array(1,2))
console.log(array<number>(1,2))

（这里指定T为number类型） 

可是通常情况下，我的函数参数类型不一定只有一种，该怎么办呢

很简单，我们可以定义多种泛型

如：

function array<T,K>(a:T, b:K):(T|K)[]{
    return [a, b]
}

console.log(array(1,"2"))
console.log(array<number, string>(1,"2"))

泛型约束

开发过程中，我们可能遇到这种情况，在泛型函数中，我们需要调用参数的.length方法，但在定义函数时，泛型具体是什么类型还没有被指定，无法确认选择的类型是否真的有length方法，这个时候我们得想办法对泛型进行约束。

就拿需要调用参数的.length方法为例，我们知道，只有string和数组类型才能调用，所以我们可以通过extend去限制泛型

function array<T extends string|any[]>(a:T, b:T):T[]{
    console.log(a.length)
    return [a, b]
}

console.log(array("12334","2"))
console.log(array(["1", "33"],["2"]))

接口泛型

普通的接口函数一般是定义一些要写的变量和函数要求

interface Fun {
    (name: string):string
}

let fun:Fun = function (name:string):string{
    return ""
}

但是接口里的函数也可能是泛型1函数

interface ArrType<T> {
    (a1: T,a2:T):T[]
}

let fun:ArrType<string> = function (a1:string, a2:string):string[]{
    return [a1, a2]
}

 （只需要把泛型类型定义在接口后面的尖括号中，其实也可以写在内部的函数前面，像这样⬇，但是这样就只是针对于该函数的写法，并不推荐使用）

interface ArrType {
    <T>(a1: T,a2:T):T[]
}

let fun:ArrType = function<string> (a1:string, a2:string):string[]{
    return [a1, a2]
}

除了接口中的方法可以使用泛型定义，属性当然也可以的

interface Info<T> {
    like: T
}

let zhangsan: Info<string> = {
    like: "羽毛球"
}
let lisi: Info<string[]> = {
    like: ["羽毛球"]
}

 这里同样可以加上泛型约束

interface Info<T extends string|string[]> {
    like: T
}

let zhangsan: Info<string> = {
    like: "羽毛球"
}
let lisi: Info<string[]> = {
    like: ["羽毛球"]
}

弹药注意，这里不要和接口继承搞混了，我们知道，接口也是可以继承的，它和泛型约束相似但不一样。

interface People {
    name?: string
}
interface Info<T extends string|string[]> extends People{
    like: T
}

let zhangsan: Info<string> = {
    like: "羽毛球"
}
let lisi: Info<string[]> = {
    like: ["羽毛球"]
}

keyof

这里我们又有一个需求，我们需要传入一个key来调取某个对象的key属性，我们该如何去做。

我们可能会将key作为参数传进去，再获取对象的key属性：

interface Info {
    name: string
    age: number
}

let zhangsan:Info = {
    name:"zhangsan",
    age: 21
}

function getInfoValue(info:Info, key: string):void{
    // 这个时候，这里会报错，原因是因为传入的这个key，有可能不是Info的属性
    console.log(info[key])
}

getInfoValue(zhangsan, "name")

（！typescript的类型检查会帮你避免很多问题哦）

当key属性并不在Info中时，会报错！

 上面这种方法没办法解决，我们可以使用keyof来实现。

interface Info {
    name: string
    age: number
}

let zhangsan:Info = {
    name:"zhangsan",
    age: 21
}

function getInfoValue(info:Info, key: keyof Info):void{
    console.log(info[key])
}

getInfoValue(zhangsan, "name")
getInfoValue(zhangsan, "age")
getInfoValue(zhangsan, "age1") // 不满足keyof的校验，会报错

（key : keyof Info)限定了传入的key必须是Info里面的属性！

 再结合前面学习的泛型，这里我们可以进行优化：

interface Info {
    name: string
    age: number
}

let zhangsan:Info = {
    name:"zhangsan",
    age: 21
}

function getInfoValue<T extends keyof Info>(info:Info, key: T):Info[T]{
    return info[key]
}

getInfoValue(zhangsan, "name")
getInfoValue(zhangsan, "age")