描述
- 给函数添加类型变量T(使用尖括号<>包裹),它可以捕获用户传入参数的类型,并且使用T作为返回值类型。
- 它可以保证传递进函数的参数类型与返回值类型完全一致。
- 泛型函数适用于多种类型,相较于使用any类型,它不会丢失类型信息。
固定泛型参数
const getArr = <T>(value: T, times: number = 5): T[] => {
return new Array(times).fill(value)
}
let len = getArr<string>('123', 3).map((item) => item.length)
let lens = getArr<number>(123, 3).map((item) => Number(item.toFixed()))
console.log(len)
console.log(lens)
省略泛型参数
- 省略泛型的类型参数,编译器可以根据传递的参数自动推断T的类型。
/*
去掉上面getArr后尖括号就可以了,编辑器会自动根据参数的类型来推断T的类型
*/
let getArrays: <S, N>(value: S, times: N) => S[] //2个泛型参数
getArrays = (value, times) => {
return new Array(times).fill(value)
}
console.log(getArrays<string, number>('1', 2))
用泛型约束函数
let getArrays: <S>(value: S, times: number) => S[]
getArrays = (value, times) => {
return new Array(times).fill(value)
}
console.log(getArrays<string>('1', 2))
类型别名与接口方式
interface GetArray {
<S>(value: S, times: number): S[]
}
// type GetArray = <S>(value: S, times: number) => S[]
let getArrays: GetArray = (value, times) => {
return new Array(times).fill(value)
}
console.log(getArrays('1', 2))
约束泛型
// 泛型约束
interface ArrayLength { // 定义一个接口,必须含有length类型为number
length: number
}
const getArr = <T extends ArrayLength>(value: T, times): T[] => {
return new Array(times).fill(value)
}
console.log(getArr('1', 2))
console.log(getArr({ a: 1, length: 2 }, 2))// 对象自定义了一个length,不会报错
console.log(getArr(1,2)//这里会报错,数值没有length属性
- 获取一个对象中没有的属性时,返回是undefined,但是这时定义的泛型并没有进行参数,所以编辑器内并不会报错
let getArr = <T, K extends keyof T>(obj: T, key: K) => {
//K extends keyof T 理解成 K继承T中所有的属性
return obj[key]
}
let obje = {
a: 1,
b: 2
}
console.log(getArr(obje, 'a'))
console.log(getArr(obje, 'c')) // undefined 这里编辑器内报错了
Comments | NOTHING