TS - Generics泛型

一、泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

1.1泛型的基本使用

首先实现一个函数 getArr ，它创建一个数组，将传入的可变数量参数push到数组,并且将这个数组返回.
我限制了传入参数的类型string|number
传入字符串'foo',''bar,并通过forEach方法获取item的长度

type Arr = (...args: (string | number)[]) => Array<string | number>
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<string | number>
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<any>
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<string>
function getArr(...args: number[]): Array<number>
function getArr(...args: (string | number)[]): Array<string | number> {
  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<T>(...args: T[]): Array<T> {
  const arr:T[] = [] //泛型变量可用于函数体中
  arr.push(...args)
  return arr
}
getArr<string>('foo', 'bar').forEach(item => {
  item.length;// 3
})

getArr<number>('foo', 'bar').forEach(item => {
  item.toFixed(1) // 正常编译
})

在匿名函数名前添加了 <T>， T 用来指代任意输入的类型，通过泛型变量就可以使输入输出类型保持一致.

在调用的时候，可以在函数名后指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算.

1.2 多个泛型参数

定义泛型的时候，可以一次定义多个类型参数：

type Func = <T, U>(x: T, y: U) => [U, T]
let swap: Func = (x, y) => {
  return [y,x]
}
swap(1,'1'); // ['1',1]

函数swap返回一个元组,元组中的数据类型与函数传入参数类型一致.

1.3 泛型约束

使用泛型时,不预先指定具体的类型，而在使用的时候再指定.

function foo<T>(x: T): T {
  return x 
}
foo<string>('foo').length

这未免有点与TypeScript优点相悖,类型限制shape应该在定义而不是在使用时.

此时如果把访问length属性放在函数体中,

function foo<T>(x: T): T {
  x.length  // 类型“T”上不存在属性“length”
  return x 
}
foo('foo')

报错了,此时x的类型为any,不是所有的类型都有length这个属性,所以不能随意的操作它的属性或方法.
那么怎么在定义函数时给泛型类型加以限制呢.
使用extends 关键字
(1)直接继承具体类型

function foo<T extends string>(x: T): T {
  x.length 
  return x
}
foo('foo')

此时才真正做到了输入输出类型一致,并且限制了输入类型的shape
(2)继承接口

interface Bar {
  length: number
}
function foo<T extends Bar>(x: T): T {
  x.length
  return x
}
foo('foo') // ✔
foo({ length: 233 }) // ✔

限制了泛型必须要有length这个属性.
(3)多个泛型参数之间相互约束

function foo<T, U extends keyof T>(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<T = number>(x: T): T {
  return x
}

在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

二、泛型与接口

(1) interface
将1.1.2 使用泛型例子可用接口重构

interface Arr {
  <T>(...args: T[]): Array<T>
}
let getArr: Arr
getArr = (...args) => {
  const arr = []
  arr.push(...args)
  return arr
}

也可以把泛型参数提前到接口名上,应用于混合类型接口

interface Arr<T>{
  (...args: T[]) :Array<T>
}
let getArr: Arr<any>  //定义类型any
getArr = (...args) => {
  const arr = []
  arr.push(...args)
  return arr
}

注意，此时在使用泛型接口的时候，需要定义泛型的类型。且会出现unexpected error .慎用.

(2) type同理

type Arr = <T>(...args: T[]) => Array<T>

let getArr: Arr
getArr = (...args) => {
  const arr = []
  arr.push(...args)
  return arr
}

提取到接口名上也要定义泛型类型,但其实多此一举

type Arr<T> = (...args: T[]) => Array<T>

let getArr: Arr<any>= (...args) => {
  const arr = []
  arr.push(...args)
  return arr
}

三、泛型与类

与泛型接口类似，泛型也可以用于类的类型定义中.

class Person<T = string> {
  name: T
  constructor(name: T) {
    this.name = name
  }
  run(): T {
    const foo: T = this.name
    return foo
  }
}
const why = new Person<string>('why')
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,245评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,749评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,960评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,575评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,668评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,670评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,664评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,422评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,864评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,015评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,646评论 3赞 323
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2赞 352