function func(arg: any): any {
return arg
}
const result: string = func(123)
如上所示,func中输入输入arg可以是任意类型,返回也是任意类型,但是无法做到在调用函数时,我希望返回一个string类型,而我实际输入是number类型,按照函数方法直接返回依然是number类型,但是在ts文件中不会报错。
因此引入泛型概念,在函数名后面通过添加<T>来设置一个类型,并将参数和返回值都设置此参数,达到返回值和输入参数是一个类型的目的。
function func<T>(arg: T): T {
return arg
}
const result: string = func(123)
此处result报错:不能将类型“number”分配给类型“string”。
类型推断:result通过类型推断变成number类型
function func<T>(arg: T): T {
return arg
}
const result = func(123)
泛型运用
function func<T>(arg: T): T {
return arg
}
const result = func(123)
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]]
}
const result2 = swap(['string', 123])
// 返回[123,'string']
约束泛型
function echoWithArray<T>(arg: T):T {
console.log(arg.length)
return arg
}
上述代码length处报错:类型“T”上不存在属性“length”。
function echoWithArray<T>(arg: T[]):T[] {
console.log(arg.length)
return arg
}
或者通过extends继承属性方法,先通过interface申明一个接口,在通过extends使T继承属性,const str、obj、arr都不会报错,并且会类型推断
interface IWithLength {
length: number
}
function echoWithLength<T extends IWithLength>(arg: T): T {
console.log(arg.length)
return arg
}
const str = echoWithLength('str')
const obj = echoWithLength({ length: 10 })
const arr = echoWithLength([1, 2, 3])
泛型在类和接口中的使用
class Queue {
private data = []
push(item) {
return this.data.push(item)
}
pop() {
return this.data.shift()
}
}
const queue = new Queue()
queue.push(123)
queue.push('string')
console.log(queue.pop().toFixed)
console.log(queue.pop().toFixed)
上述代码中ts内不会报错,但是实际上在第二个toFixed中是一个string类型,而toFixed是数字的方法,所以在实际运行中会报错,
class Queue {
private data = []
push(item: number) {
return this.data.push(item)
}
pop() {
return this.data.shift()
}
}
const queue = new Queue()
queue.push(123)
queue.push('string')
console.log(queue.pop().toFixed)
console.log(queue.pop().toFixed)
当push规定好item类型后,此时上述代码中string处会报错:类型“string”的参数不能赋给类型“number”的参数。
而在实际运用中只规定item这一种类型并不符合实际,所以采用泛型,创建一个泛型类,在Queue后面加<T>
class Queue<T> {
private data = []
push(item: T) {
return this.data.push(item)
}
pop(): T {
return this.data.shift()
}
}
const queue = new Queue<number>()
queue.push(123)
queue.push('string')
console.log(queue.pop().toFixed)
console.log(queue.pop().toFixed)
此时上述代码中string处报错:类型“string”的参数不能赋给类型“number”的参数。
泛型在接口中的使用
interface keyPair<T, U> {
key: T,
value: U
}
let ky1: keyPair<number, string> = { key: 1, value: 'string' }
let ky2: keyPair<string, number> = { key: 'str', value: 2 }
let arr1: number[] = [1,2,3]
let arr2: Array<number> = [1,2,3]