typescript 范型实践

343 阅读1分钟

前言: 代替 any 实现函数,则在

    使用场景1
    比如: 函数参数传入 使用的数组并不确定类型,可以使用<T>
                     传入的可能是数字也可能是string | number,可以使用<T>
          函数返回类型 返回类型可能是个数组,或其他,可以使用 T

范型的语法糖

1.在函数名后接<T> 比如:function find<T>,这个T后续在赋值时会变成相应的类型
2.联动使用,哪些地方不确定类型则可以使用T,比如:参数类型|返回类型赋值 
    function find<T>(arr: Array<T>, cb:()=>T):T{}
3.可以定义多个范型,如果并不是所用参数都是同一个范型的话 ,可以写成 <T,U>
    function find<T,U>(arr: Array<T>, cb:()=>T):U{}

范型实践

// 范型的使用

// 需求场景实现find函数 找到符合条件的结果

function myFind<T>(arr: Array<T>, cb:(cItem:T,cIndex?:number)=>boolean):T|undefined{
    for (let i:number = 0; i < arr.length; i++) {
        if (cb(arr[i],i)) {
            return arr[i]
        }
    }
    return undefined
}

let arr :Array<number> = [1,2,3]
let res = myFind(arr,(item)=>item === 1)
console.log(res)

范型约束

1.限制传进来的变量必须具有某些属性
比如:函数内部需要调用到实参的length,那这是约束实参就必须具备length属性
interface len {
   length: number
}
function conLen<T extends len>(a:T){
        console.log(a.length)
    }
    
 2.keyof 约束 对象 key名
    
/**
 * 
 * keyof 类型:可以用于分割对象的所有keys值,返回联合类型。
 * 比如 obj1 = {a:1,b:2,c:3}<T,K extends keyof T> ,则K会被 T会被分割成的联合赋值,K = a | b | c
 */

// 限制对象传进来的属性只能是当前对象自身'拥有'的key
function prop<T,K extends keyof T>(obj: T, key: K):void {
    console.log(obj[key])
}
let obj1 = {a:1,b:2,c:3}
prop(obj1, 'a')