- 【序】当我们写Typescript时，我们常常会用到类型声明，但是到定义回调函数时，就用一个any去定义，那么该如何很好的声明回调函数呢？最合理的方法就是使用泛型，所以从这个文章中我们学习到了使用泛型的相关知识*
问题一：
- 【疑惑】什么是泛型？
- 【解惑】一种更宽松条件的类型定义，依据你创建变量时定义的类型去推演参数的类型，下列例子
下面是很常见的使用方法，回调函数中的item是可以动态的追溯到正确的类型的，这是如何实现的呢？
const demo1: Array<number> = [1, 2, 3];
const demo2: Array<string> = ['a', 'b', 'c'];
demo1.map((item) => item);
demo2.map((item) => item);
例如：array的对象如何兼容两种不同的类型呢？如果不使用泛型的话，map的回调函数的参数里就只能用“或”符号来穷举类型。
interface array<number | string>{
map(callbackfn: (value: string | number, index) => string[]|number[]):string[]|number[]
}
但是上面这种写法过于繁琐，因此可以使用泛型来解决问题，下面是使用泛型的写法
interface array<T>{
map(callbackfn:(value:T,index:number,array:T[])=> U):U[]
}
此处的关键：首先我们定义了第一个类型变量T，因为在callbackfn中需要生成一个新的类型，这个类型我们不确定，因此新定义了另一个类型变量U
- 【疑惑】：为什么又T和U？其实没有具体约束，一般约定使用一个大写的字母作为类型变量名
问题二
- 【疑惑】：泛型还可以怎么用呢？
- 【解惑】：可以在接口，类，函数中使用
-- 函数中使用
// 声明一个泛型变量
function identity<T> {}
// 在参数中使用泛型变量
function identity<T>(arg: T) {}
// 在返回值中使用泛型变量
function identity<T>(arg: T): T {}
// 变量声明函数的写法
let myIdentity: <T>(arg: T) => T = identity;
-- 接口中使用
// 使用接口约束一部分数据类型，使用泛型变量让剩余部分变得灵活
interface Parseer<T> {
success: boolean,
result: T,
code: number,
desc: string
}
// 接口泛型与函数泛型结合
interface Array<T> {
map<U>(callbackfn: (value: T, index: number, array: T[]) => U): U[]
}
-- 类中使用
// 注意总结相似性
declare namespace demo02 {
class GenericNumber<T> {
private value: T;
public add: (x: T, y: T) => T
}
}
// 多个泛型变量传入
declare namespace demo02 {
class Component<P, S> {
private constructor(props: P);
public state: S;
}
}
- 【疑惑】：在类中和函数中我们比较容易理解泛型，但是在interface中表示了什么意思呢？
- 【解惑】：我们此时可以将interface看作一个用于定义类型的函数，当在实际使用时，传入什么，就给内部的属性什么类型，可以以这样的想法去看待interface回看下例子就更容易理解。
问题三
- 【疑惑】：另一个比较常见的场景就是Promise返回一个对象，我们该如何做呢？
- 【解惑】：要理解类型的嵌套
- 【关键】：Promise的interface需要一个类型变量，实际调用时我们传入了Result这个类型变量，而这个Result类型变量又需要传入一个类型变量，然后我们又传入Person这个类型变量
interface Person {
name: string,
age: number
}
function fetchData(): Promise<Result<Person>> {
return http.get('/api/demo/person');
}
如果抛开真实的Promise的定义，上面的Promise就可以定义为
interface Promise<T>{
results:T
}
interface Result<T>{
results:T
}
我们实战一下，返回一个带分页的数据
interface Person {
name: string,
age: number
}
interface Page<T> {
current: number,
pageSize: number,
total: number,
data: T[]
}
function fetchData(): Promise<Result<Page<Person>>> {
return http.get('/api/demo/page/person');
}
【引申】：我们在看一下TS中的数组的定义文件，验证我们的理解
interface Array<T> {
length: number,
toString(): string,
pop(): T | undefined,
// 注意此处的含义
push(...items: T[]): number,
concat(...items: T[]): T[],
join(separator?: string): string,
reverse(): T[],
shift(): T | undefined;
slice(start?: number, end?: number): T[],
sort(compareFn?: (a: T, b: T) => number): this,
splice(start: number, deleteCount?: number): T[],
// 注意此处的重载写法
splice(start: number, deleteCount: number, ...items: T[]): T[],
unshift(...items: T[]): number,
indexOf(searchElement: T, fromIndex?: number): number,
lastIndexOf(searchElement: T, fromIndex?: number): number,
every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean,
some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean,
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void,
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[],
filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[],
filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[],
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T,
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T,
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U,
// reduceRight 略
// 索引调用
[n: number]: T,
}
网友评论