为什么需要使用泛型？
在某些条件下我们需要给一个函数的参数指定任意类型，然后让他返回任意类型，通常我们的写法就会像下面这样
function returnIt(sth: any): any {
return sth
}
但是上面的代码实际上是有问题的，如果我的参数是一个number类型，最后返回的是一个string类型的话(number => string)，这也是any => any，而实际上我们需要的是给我一个number类型，也返回一个number类型(number => number)
针对上面的情况我们需要在参数和返回值都是任意类型的情况下还能类型一一对应，这时候我们就需要用到泛型，代码如下
function returnIt<T>(sth: T):T {
return sth;
}
returnIt('hi')
代码解释：returnIt<T>里面的T就是表示里面有一个占位符T，sth: T表示假设我的参数类型是T，那么我返回的类型是跟参数的类型是一样的(:T)；然后我们调用的时候传入一个字符串hi，那么我们的T就是 string
泛型的定义：用一个展位符表示广泛的类型
泛型的声明
- 显式的声明占位符类型
在调用的时候声明一下T的类型
returnIt<string>('hi')
// 如果声明的占位符类型与后面传入值得类型不一致会报错
return<string>(2)
- 支持多种类型的数组
主要要在参数和返回值的T后加一个中括号[]
T[]等价于Array<T>
function returnArr<T>(sth: T[]): T[] {
return sth;
}
// 等价于
function returnArr<T>(sth: Array<T>): Array<T>] {
return sth;
}
interface Human {
name: string,
age: number
}
let lifa = returnArr<Human>([{name: 'lifa', age: 18}, { name: 'siyan', age: 20 }])
上面代码我们显式的声明占位符T的类型是Human，参数和返回值类型就对应着Human[]，也就是说数组的每一项都是Human类型
- 泛型函数的不同声明方式
(1). 具名函数声明式
function returnArr<T>(sth: T[]): T[] {
return sth;
}
(2). 匿名函数声明式
let returnArr2: <T>(sth: T[]) => T[] = returnArr
声明一个returnArr2是一个泛型函数，然后把满足条件的函数赋值给它
泛型与接口相结合
再接口名后面添加一个占位符
interface Human2<T> {
(a: T, b: T) : T
}
let z: Human2<string> = (a: string, b: string): string => {
return a + b
}
console.log(z('1', '1'))
泛型类
class GenericNumber<T> {
age: T;
marry: (women: T, men: T) => T;
}
let human = new GenericNumber<number>();
human.age = 18
human.marry = function(x, y) {
return x + y
}
泛型约束
function returnIt<T>(sth: T): T {
console.log(sth.length)
return sth;
}
上面的代码我们直接打印出sth.length会报错
它认为类型T上不存在属性length，因为你T的类型不确定，如果是布尔它就没有length，所以我们就需要对T进行一个约束，让T必须具有length，这里就用到了前面说的描述一个对象必须具有的属性就要用接口或类
interface hasLength {
length: number
}
function returnIt<T extends hasLength>(sth: T): T {
console.log(sth.length)
return sth;
}
上面的代码我们让T继承hasLength也就是说T肯定会有length属性，所以就不会报错
约束对象的key
// K extends keyof T让K继承T的key
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key]
}
let x = {a: 1, b:2, c:3, d: 4}
getProperty(x, 'a') //可以通过ts校验，因为a是x这个对象的key
getProperty(x, 'm') // 不能通过，因为a里面没有m这个key
在泛型里使用类
function create<T>(c: {new(): T; }): T {
return new c();
}
(1). 上面的代码我们有点看不懂，那我们就把它还原成最初的js代码
function create(c) {
return new c()
}
我们还原后的js代码很容易读懂，就是传一个c然后我们new它，但是c不一定可以new，c有可能是一个字符串比如'hi'
(2). 对我们的c进行约束，c必须是一个类
function create(c: { new() }) {
return new c()
}
通过{ new() }来约束它，意思是c必须能被new，在ts里能被new的只有类了
(3). 指定我们的实例类型为任意类型
function create<T>(c: { new(): T }) {}
class Human {}
let lifa = create<Human>(Human)
上面我们指定创建一个实例类型为Human的类，参数传入我们的Human就会创建我们的Human类型，这时候如果我们参数传一个Animal就不报错（因为类本身就可以当做类型所以我们声明的Human类即是类型又是参数，只有两个一致的时候才会创建一个实例类型为Human的类）；
function create<T>(c: { new(): T }) {}
class Human {}
class Animal{}
let lifa = create<Human>(Animal)
网友评论