函数泛型

需求

编写一个函数，传入两个参数，返回这两个参数组成的数组

注意，两个参数的类型必须一致

例如 
fun(1,2)       => [1, 2]
fun("2", "2")  => ["2", "2"]

不使用泛型

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

使用泛型

泛型就是把类型当做参数

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


console.log(array(1,2))
console.log(array("1","5546"))
console.log(array(true, false))
console.log(array(null, null))

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

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

多参数情况

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

那么它的类型就应该是 string或者是数组

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 ""
}

接口函数的泛型

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

let fun:ArrType<string> = function (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

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

使用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的校验，会报错

在getInfoValue函数的基础上，实现将value返回

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