TypeScript回调函数该如何声明？

2020-08-30 本文已影响0人陌客百里

【序】当我们写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,
}

TypeScript回调函数该如何声明？

问题一：

问题二

问题三

猜你喜欢

热点阅读