前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript:得泛型者,得天下

TypeScript:得泛型者,得天下

作者头像
用户6901603
发布2020-07-23 23:42:29
2.8K0
发布2020-07-23 23:42:29
举报
文章被收录于专栏:不知非攻
UI 鉴赏 - 这是我的第 61 篇原创
UI 鉴赏 - 这是我的第 61 篇原创

这篇文章跟大家分享学习ts的又一个重难点「泛型」。在ts中,得泛型者,得天下!

1

什么是泛型

整个ts的学习,其实就是各种数据类型的类型约束的学习。当我们规定一个变量只能是number时,它就不能是其他数据类型。

代码语言:javascript
复制
let a: number = 20;
a = 'string' // 类型错误

在函数中也是一样,传入的参数类型,与返回的参数类型,都会被不同的约束规则约束。

代码语言:javascript
复制
function foo(a: number, b: string): string {
  // todo
}

当然我们也知道,还可以使用interface,type定义更为复杂的类型约束。可是这个时候我们就会面临一个问题。

以我们用的非常多的数组方法map为例。

代码语言:javascript
复制
[1, 2, 3].map(item => {
  return item + 1;
})

我们都知道map方法接收的第一个参数为一个回调函数callbackcallback的第一个参数为数组的每一项。那么问题就来了,不同的数组调用map,数组的每一项数据类型必然不一样,我们没办法简单的使用某一种数据类型来准确的约束数组的每一项。

代码语言:javascript
复制
[1, 2, 3].map()
['a', 'b', 'c'].map()

怎么办?当数组不一样时?如何来约束呢?

这种情况,需要借助「泛型」来帮助我们。

单一的,明确的类型约束理解起来相对简单,可是实践中我们需要对约束稍微放宽一点限制,那么单一的约束就无法满足需求。泛型,即为更广泛的约束类型

仔细观察下面的三组案例,思考一下如果我们要自己描述Array类型与数组中的map方法应该怎么做?

代码语言:javascript
复制
interface Person {
  name: string,
  age: number
}

const demo1: number[] = [1, 2, 3];
const demo2: string[] = ['a', 'b', 'c'];
const demo3: Person[] = [{ name: 'alex', age: 20 }, { name: 'john', age: 10 }, { name: 'hx', age: 21 }];

demo1.map((item) => item);
demo2.map((item) => item);
demo3.map((item) => item);

注意观察不同数组item的不同类型

从图中可以看出,当不同的数组调用map时,回调函数的参数item,会自动推导为对应的数据类型。也就是说,这里的item,必然是使用了泛型进行了更为宽松的约束。具体如下:

代码语言:javascript
复制
interface Array<T> {
  map<U>(callbackfn: (value: T, index: number, array: T[]) => U): U[]
}

我们在声明数组类型时,定义了一个泛型变量TT作为泛型变量的含义为:我们在定义约束条件时,暂时还不知道数组的每一项数据类型到底是什么,因此我们只能放一个占位标识在这里,待具体使用时再来明确每一项的具体类型。

因此针对数据的描述,我们通常可以这样做:

代码语言:javascript
复制
const arr1: Array<number> = [1, 2, 3];
const arr2: Array<string> = ['a', 'b', 'c'];
const arr3: Array<Person> = [{ name: 'alex', age: 20 }, { name: 'john', age: 10 }, { name: 'hx', age: 21 }];

这里分别定义了三个数组,在约束这些数组时,我们明确了泛型变量T的具体数据类型,分别对应为number, string, Person

那么在描述map时的写法就很好理解了。回调函数callbackfn的第一个参数就是数组的每一项,正好就是定义数组时传入的泛型变量T,不过回调函数会返回一个新的数组项,因此我们需要重新定义一个新的泛型变量来表达这个新数组,即为U

代码语言:javascript
复制
map<U>(callbackfn: (value: T, index: number, array: T[]) => U): U[]

于是我们就使用泛型,准确的描述了map方法的含义。

如果经过上述的解释还不清楚泛型概念的话,留言

2

基础语法

如果完整的理解了泛型的概念,那么泛型的基础知识就比较简单了,过一遍就OK。

函数中使用泛型

代码语言:javascript
复制
// 声明一个泛型变量
function identity<T> {}

// 在参数中使用泛型变量
function identity<T>(arg: T) {}

// 在返回值中使用泛型变量
function identity<T>(arg: T): T {}

// 变量声明函数的写法
let myIdentity: <T>(arg: T) => T = identity;

接口中使用泛型

代码语言:javascript
复制
// 使用接口约束一部分数据类型,使用泛型变量让剩余部分变得灵活
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[]
}

class中使用泛型

代码语言:javascript
复制
// 注意总结相似性
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;
  }
}

3

泛型实践场景

描述数组

代码语言:javascript
复制
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,
}

列举了几乎所有的数组方法与特性,如果能够从上诉描述文件中掌握如何使用数组方法,那么就表示对于函数,接口,泛型的理解已经比较到位了。如果还不能读懂,则多读几遍,留言

描述数据返回结果

约定所有的接口返回满足统一的数据格式。但是具体的可用的数据结果则因为情况不同,会有不同的场景。因此使用泛型先定义一个基本的结构约束。

代码语言:javascript
复制
interface Result<T> {
  success: true,
  code: number,
  descript: string,
  result: T
}

结合Promise,当数据返回结果为number时

Promise本身就需要接受一个泛型变量,因此这里要注意泛型的嵌套使用

代码语言:javascript
复制
function fetchData(): Promise<Result<number>> {
  return http.get('/api/demo/number');
}

当数据返回结果为普通JSON数据时

代码语言:javascript
复制
interface Person {
  name: string,
  age: number
}

function fetchData(): Promise<Result<Person>> {
  return http.get('/api/demo/person');
}

当数据返回为数组时

代码语言:javascript
复制
interface Person {
  name: string,
  age: number
}

function fetchData(): Promise<Result<Person[]>> {
  return http.get('/api/demo/persons');
}

当返回结果为分页对象时

代码语言:javascript
复制
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');
}

分页对象的返回结果比较复杂,因此描述清楚需要多层嵌套,如果你理解了分页对象,那么基本上泛型就没有什么问题啦!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-01-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 不知非攻 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1
  • 2
  • 3
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档