TypeScript泛型约束条件示例详解

目录

• 什么是泛型
• 泛型的应用场景
• 泛型约束(限制条件)
• 泛型函数调用指定类型
• 总结

什么是泛型

两个值之间存在的对应关系，就可以用泛型来解决

泛型的应用场景

当一个函数的返回值的类型需要与此函数的参数类型想关联的时候，就需要使用泛型

例如

//约定此函数调用时必须传入一个数组，并返回数组第一项
function arrFn <T> (arr: T[]) :T|undefined {
        return arr[0]
}

  const n = arrFn([1,2])      //number类型
  const s = arrFn(['a','b'])  //string类型
  const u = arrFn([])          //undefined类型
  
  //也可以进行指定类型
  arrFn<number>([1,2])   //此时数组中元素就必须是number类型

再例如，我们将数组的map方法进行加工

// 定义一个map函数
//第一个参数约定传入一个数组
//第二个参数约定传入一个函数 
//此函数的返回值就是操作之后的数组

function map <In,Out>(arr:In[], fun:(val:In)=>Out):Out[] {
    return arr.map(fun)
}

const res = map([1,2,3,4,5],(i)=>i+1)
console.log(res) ///[ 2, 3, 4, 5, 6 ]

泛型约束(限制条件)

默认情况下，泛型函数的类型变量 T 可以代表多个类型，这导致在泛型函数内部无法访问任何属性

当我们需要用到一些属性的时候，就无法使用，会报错，比如字符串、数组的长度

接下来我们看个例子

// 定义一个函数，传入两个值，来比较哪个更长 ,相等就返回0
function compare <T extends {length: number}> (a:T, b:T){
    if(a.length < b.length){
        return b
    }else if(a.length === b.length){
        return (a.length - b.length)
    }else{
        return a
    }
}
const res1 = compare('哈哈哈','哈哈哈')
console.log(res1) // 0

const res2 = compare('我真酷','你酷')
console.log(res2) // '我真酷'

const res3 = compare('我酷','你真酷')
console.log(res1) // '你真酷'

当然，当我们在使用泛型约束的时候，也会出现常见的错误

//我们定义一个泛型T ，并让其继承一个有length属性的对象
//给参数指定类型，第一个参数为T类型，第二参数为number类型
//返回值也为T类型
const myTs =<T extends {length:number}> (obj:T,num:number):T => {
        if(obj.length >= num){
            return obj
        }else{
            return {length:num} //此处会报错
        }
    }

这个函数的返回值看似没问题，其实会报错

我们把这个代码稍微改造一下，就容易理解了

const myTs =<T extends {length:number}> (obj:T,num:number):T => {
        if(obj.length >= num){
            return obj
        }else{
            const res = {length:num}   //把鼠标放上res，可以看到res的类型是 {length:number}
            return  res       //但是我们约定的返回值是T类型，
                              //这里会报错 不能将类型“{ length: number; }”分配给类型“T”
        }
    }

我们将代码改造成这样就是正确的

 const myTs =<T extends {length:number}> (obj:T,num:number):T => {
        if(obj.length >= num){
            return obj
        }else{
             obj.length = num
            return  obj
        }
    }
   const res =  myTs({length:3},6)
   console.log(res)   //{ length: 6 }

泛型函数调用指定类型

在定义完成泛型函数之后，我们去调用函数并传参的时候，并没有去指定参数类型，当多个参数类型不同的时候，TS就会报错，接下来请看一个例子：

定义一个泛型函数，用来连接数组，约定参数必须为数组

 // 定义一个连接两个数组的函数 
    // 并约定两个参数的类型都为泛型数组
    // 且返回值也为一个泛型数组
    const mergeArray = <T> (arr1 : T[],arr2 : T[]) :T[] => {
        // concat 为数组连接，不会改变原数组，需要使用值接收
        return arr1.concat(arr2)
    }
    // 但是当我们在使用这个函数的时候就会发现
    // 如果第一个参数数组中的元素都为number类型
    // 而第二个参数数组的类型与第一个不一致时
    // TS就会报错，这样使用就只能传入两个一样类型的数组参数
    mergeArray([1,2,3],['a','b']) //报错，不能将类型“string”分配给类型“number”

所以当我们调用函数的时候就可以指定参数类型

这样参数就是我们指定的参数类型了

 const  res=  mergeArray<number | string>([1,2,3],['a','b','c'])
    console.log(res)  //[ 1, 2, 3, 'a', 'b', 'c' ]

总结

到此这篇关于TypeScript泛型约束条件的文章就介绍到这了,更多相关TypeScript泛型约束条件内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！