一、泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
1.1泛型的基本使用
首先实现一个函数 getArr ，它创建一个数组，将传入的可变数量参数push到数组,并且将这个数组返回.
我限制了传入参数的类型string|number
传入字符串'foo',''bar,并通过forEach方法获取item的长度
type Arr = (...args: (string | number)[]) => Array
let getArr: Arr
getArr = (...args) => {
const arr = []
arr.push(...args)
return arr
}
getArr('foo', 'bar').forEach(item => {
item.length // “string | number”上不存在属性“length”
})
但TS报错了,虽然逻辑上没有错误,但TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法.返回的数组类型是string|number,而number类型的数据是没有length这个属性的
此时可以使用类型断言，将 item断言成 string类型
type Arr = (...args: (string | number)[]) => Array
let getArr: Arr
getArr = (...args) => {
const arr = []
arr.push(...args)
return arr
}
getArr('foo', 'bar').forEach(item => {
(item as string).length
})
类型断言非常好用,但只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误.
有没有其他办法呢?
试着把返回数组的类型改成any呢
type Arr = (...args: (string | number)[]) => Array
let getArr: Arr
getArr = (...args) => {
const arr = []
arr.push(...args)
return arr
}
getArr('foo', 'bar').forEach(item => {
item.length;// 3
item.toFixed(1) // 正常编译
})
更改后,可以正确获取item.length,但是却丢失了一些信息.item.toFixed()方法也能正常编译了. 要知道toFixed()只能作用于number类型的数据.这显然是不对的.
果然浏览器报错了.
- error Uncaught TypeError: item.toFixed is not a function
这已经失去了使用TS的初衷:在书写代码时就发现错误
有什么办法可以让返回的类型与传入的类型保持一致呢
1.1.1 函数重载
function getArr(...args: string[]): Array
function getArr(...args: number[]): Array
function getArr(...args: (string | number)[]): Array {
const arr = []
arr.push(...args)
return arr
}
getArr('foo', 'bar').forEach(item => {
item.length;// 3
item.toFixed(1) // 报错 string上不存在error
})
通过函数重载,我指定了输入输出类型一致.使其能够正确的访问正确属性,对不存在的属性报错
但这样写代码未免太冗余了.
1.1.2 使用泛型
let getArr = function(...args: T[]): Array {
const arr:T[] = [] //泛型变量可用于函数体中
arr.push(...args)
return arr
}
getArr('foo', 'bar').forEach(item => {
item.length;// 3
})
getArr('foo', 'bar').forEach(item => {
item.toFixed(1) // 正常编译
})
在匿名函数名前添加了
在调用的时候，可以在函数名后指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算.
1.2 多个泛型参数
定义泛型的时候，可以一次定义多个类型参数：
type Func = (x: T, y: U) => [U, T]
let swap: Func = (x, y) => {
return [y,x]
}
swap(1,'1'); // ['1',1]
函数swap返回一个元组,元组中的数据类型与函数传入参数类型一致.
1.3 泛型约束
使用泛型时,不预先指定具体的类型，而在使用的时候再指定.
function foo(x: T): T {
return x
}
foo('foo').length
这未免有点与TypeScript优点相悖,类型限制shape应该在定义而不是在使用时.
此时如果把访问length属性放在函数体中,
function foo(x: T): T {
x.length // 类型“T”上不存在属性“length”
return x
}
foo('foo')
报错了,此时x的类型为any,不是所有的类型都有length这个属性,所以不能随意的操作它的属性或方法.
那么怎么在定义函数时给泛型类型加以限制呢.
使用extends 关键字
(1)直接继承具体类型
function foo(x: T): T {
x.length
return x
}
foo('foo')
此时才真正做到了输入输出类型一致,并且限制了输入类型的shape
(2)继承接口
interface Bar {
length: number
}
function foo(x: T): T {
x.length
return x
}
foo('foo') // ✔
foo({ length: 233 }) // ✔
限制了泛型必须要有length这个属性.
(3)多个泛型参数之间相互约束
function foo(obj: T, attr: U): T {
console.log(obj[attr]);
return obj
}
const bar = {
name: 'bar'
}
foo(bar, 'name')
foo(bar, 'age') // error 类型“"age"”的参数不能赋给类型“"name"”的参数。
限制了泛型U类型必须是T类型的key
1.4 泛型默认值
function foo(x: T): T {
return x
}
在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。
二、泛型与接口
(1) interface
将1.1.2 使用泛型例子可用接口重构
interface Arr {
(...args: T[]): Array
}
let getArr: Arr
getArr = (...args) => {
const arr = []
arr.push(...args)
return arr
}
也可以把泛型参数提前到接口名上,应用于混合类型接口
interface Arr{
(...args: T[]) :Array
}
let getArr: Arr //定义类型any
getArr = (...args) => {
const arr = []
arr.push(...args)
return arr
}
注意，此时在使用泛型接口的时候，需要定义泛型的类型。且会出现unexpected error .慎用.
(2) type同理
type Arr = (...args: T[]) => Array
let getArr: Arr
getArr = (...args) => {
const arr = []
arr.push(...args)
return arr
}
提取到接口名上也要定义泛型类型,但其实多此一举
type Arr = (...args: T[]) => Array
let getArr: Arr= (...args) => {
const arr = []
arr.push(...args)
return arr
}
三、泛型与类
与泛型接口类似，泛型也可以用于类的类型定义中.
class Person {
name: T
constructor(name: T) {
this.name = name
}
run(): T {
const foo: T = this.name
return foo
}
}
const why = new Person('why')