本文深入解析TypeScript中的泛型机制，重点讲解泛型约束（Generic Constraints）的应用。通过具体代码示例，演示如何利用extends关键字限制类型变量，解决泛型内部无法访问属性值的问题。同时涵盖泛型函数的类型指定与自动推导，帮助开发者编写类型安全且灵活的TypeScript代码。
泛型是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 ]泛型约束（Generic Constraints）用于限制类型变量的范围，确保其具备某些特定属性或方法。
默认情况下，泛型函数中的类型变量T可以是任意类型，这导致在函数内部无法访问任何具体属性，因为编译器不知道T是否包含这些属性。
如果需要在泛型函数中访问如length等属性，直接使用T会导致编译错误，因为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 }泛型函数调用时，可以显式指定类型参数，也可以依赖TypeScript的类型推导机制。
定义泛型函数后，调用时若未指定类型且参数类型不一致，TypeScript会报错。
例如，定义一个连接两个数组的函数，约定参数必须为数组类型。
// 定义一个连接两个数组的函数
// 并约定两个参数的类型都为泛型数组
// 且返回值也为一个泛型数组
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泛型约束条件的相关知识，更多相关内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！