TypeScript 04-泛型

一、函数泛型

我们定义一个函数，这个函数可以接受外部参数。函数可以返回结果

function show(val:number):string{
    retur "xiaowang"
}

调用函数

const res:string = show(23)

接受两个参数，计算总和在返回

function computed(va1,val2){
    return val1 + val2
}
computed(1,2)
computed("xiaowang","xiaozhang")

ts如果要完成以上的累加功能

function computed(va1:number,val2:number){
    return val1 + val2
}
computed(1,2)
computed("xiaowang","xiaozhang") //报错

泛型：泛型是TS中提供的一个模块。可以让我们在开发过程中，根据调用来决定我们函数内部，类的内部使用的到底是什么样式数据类型

// 泛型的基础语法
function check<K>(val:K):K{
    return val
}
check<number>(123)
check<string>("xiaowang")
check<Array<number>>([12,3])

我们需要在函数名字后面写 <>这个代表获取的外部传递进来的类型

//  编写一个函数,接受一个参数(数组\数字 字符串),返回最大值
function maxValue<T>(array:T[]):T{
    let max = array[0]
    array.forEach(item=>max = item > max ? item : max)
    return max
}
// function maxValue2<T>(array:T):T{
// }
const res2:number = maxValue<number>([1,4,8])
// maxValue2<Array<number>>([1,2,3])
const res3:string = maxValue<string>(["a","b","c"])

二、类的泛型

/**
 * 定义一个类,类里面定义一个数组,请数组中的最大值\最小值
 */
class computeValue<T,K>{
    //初始化数组
    public array:T[] = []
    add(val:T){
        this.array.push(val)
    }
    min():K{
        //获取到最小值
        let minValue = this.array[0]
        for (let index = 0; index < this.array.length; index++) {
            if(minValue>this.array[index]){
                minValue = this.array[index]
            }
        }
        let result:string = "最小值"+minValue;
        return result
    }
}
const com = new computeValue<number,string>()
com.add(1)
com.add(2)
com.add(3)
// const result:string = com.min()

一般类的泛型 在React开发中会遇到。

在Vue3.0和函数组件中开发，一般都用到函数的泛型