一、泛型

泛型（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')

TS - Generics泛型