TypeScript 理解泛型 generics

泛型

文章手写只是加深印象，更多详情访问TS官网

可以使用 泛型来创建可充用的组件,一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件
接口-interface 是类型检查，泛型是组件/函数的重用性

泛型之Hello World

// 如果不用泛型的话,我们的函数会写成这样
function identity(arg: number): number {
  return arg
}
// // 或者这样
function identity(arg: any): any {
  return arg
}

使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息
传入的类型与返回的类型应该是相同的,如果我们传入一个数字，我们只知道任何类型的值都有可能被返回
因此我们需要一种方法使返回值的类型与传入值得类型是相同的 => 泛型

使用泛型

我们给 identity 添加了类型变量 T
T 帮助我们捕获用户传入的类型(比如是number 或者 string)
之后我们就可以使用这个类型,之后我们再次使用了 T 当作返回值的类型.
现在我们可以知道参数类型与返回值类型是相同的了.
这允许我们跟踪函数里使用的类型的信息

function identity<T>(arg: T): T {
  return arg
}

// 定义了泛型函数之后,两种方式可以使用
// 1. 传入所有的参数, 包含类型参数, 我们明确指出 T 是 string类型的,并作为一个参数传给了函数
let output_1 = identity<string>('hello world')
// 2. 利用类型推论, 编译器会根据传入的参数自动地帮助我们确定 T 的类型
let output_2 = identity('hello world.')

泛型变量

使用泛型创建 identity这样的泛型函数时,编译器要求你在函数体必须正确的使用这个通用的类型
也就是说,必须把这些参数当作是任意或所有类型

function identity<T>(arg: T): T {
    return arg
}
// 如果我们想同时打印出arg的长度。 我们很可能会这样做：
function printIdentityLen<T>(arg: T): T {
  console.info(arg.length) // Error: T doesn't have .length
}
/**
 * 如果这么做，编译器会报错说我们使用了arg的.length属性，
 * 但是没有地方指明arg具有这个属性。 
 * 记住，这些类型变量代表的是任意类型，所以使用这个函数的人可能传入的是个数字，而数字是没有 .length属性的。
 */

// 假设我们现在要操作 T 类型的数组而不是 T
// 数组的length一定是存在的,我们可以像创建其他数组一样创建这个数组
function loggingIdentity<T>(arg: T[]): T[] {
  console.info(arg.length)
  return arg
}

我们可以这样理解 loggingIdentity 的类型: 泛型函数 loggingIdentity 接收 类型参数 T 和 参数 arg, 它是个元素类型是 T 的数组, 并且返回元素类型是 T 的数组.
如果我们传入数字数组,将返回一个数组数字,因为此时的 T的类型是 number. 这可以让我们把泛型变量 T 当作类型的一部分使用,而不是整个类型,增加灵活性

function loggingIdentity<T>(arg: Array<T>): Array<T> {
  console.info(arg.length)
  return arg
}

泛型类型

泛型函数的类型与非泛型函数的类型没有什么不同,只是有一个类型参数在最前面

function identity<T>(arg: T): T {
  return arg
}
let myIdentity: <T>(arg: T) => T = identity

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。

let myIdentity: <U>(arg: U) => U = identity

函数签名: 把函数名字去掉以后剩下的东西即返回值、参数个数、参数类型

我们还可以使用带有调用签名的对象字面量来定义泛型函数

function identity<T>(arg: T): T {
  return arg
}

let myIdentity: { <T>(arg: T): T } = identity

现在引导我们去写一个泛型接口了

interface GenericIdentityFn {
  <T>(arg: T): T
}

function identity<T>(arg: T): T {
  return arg
}
let myIdentity: GenericIdentityFn = identity

一个相似的例子,我们可能想把泛型参数当作整个接口的一个参数. 这样我们就能清楚的知道使用的具体是哪个泛型类型(比如 Dictionary<string>而不只是Dictionary),这样接口里的其它成员也能知道这个参数的类型了。

interface GenericIdentityFn<T> {
  <T>(arg: T): T
}

function identity<T>(arg: T): T {
  return arg
}
let myIdentity: GenericIdentityFn<number> = identity

注意: 上面的示例做了少许改动.不再描述泛型函数, 而是把非泛型函数签名作为泛型类型的一部分. 当我们使用 GenericIdentityFn的时候, 还需要传入一个类型参数来指定泛型类型(number), 锁定了之后代码里使用的类型. 对于描述哪部分类型属于泛型部分来说, 理解何时把参数放在调用签名里和何时放在接口上是很有帮助的.

泛型类

泛型类和泛型接口差不多, 泛型类使用<>跟在类名后面

class GenericNumber<T>{
  zeroValue: T
  add: (x: T, y: T) => T
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 100
myGenericNumber.add = (x, y) => x + y
myGenericNumber.add(1, 2)
// 没有什么去限制它只能使用number类型。 也可以使用字符串或其它更复杂的类型。
let stringGeneric = new GenericNumber<string>();
stringGeneric.zeroValue = 'init'
stringGeneric.add = (x, y) => x + y
stringGeneric.add('l', 'x')

注意:与接口一样,直接把泛型类型放在类后面, 可以帮助我们确认类的所有属性都在使用相同的类型.
注意:类分为两部分 静态部分和实例部分. 泛型类指的是实例部分的类型. 所以类的静态属性不能使用这个泛型类型

泛型约束

有时我们想操作某类型的一组值, 并且我们知道这组值具有什么样的属性。在loggingIdentity例子中, 我们想访问 arg的length的属性，但编译器并不能证明每种类型都有 length属性，所以就报错了

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}

相比于操作any所有类型,我们想要限制函数去处理任意带有.length属性的所有类型，只要传入的类型有这个属性，我们就允许，就是说至少包含了这一属性。为此，我们需要列出对于 T 的约束要求
为此, 我们定义一个接口来描述约束条件。创建一个包含.length属性的接口. 使用这个接口和extends关键字实现约束

interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.info(arg.length)
  return arg
}

限制这个泛型函数呗被定义了约束，因此不再是使用任意类型

// loggingIdentity(3) // Error, number doesn't have a .length property
// 我们需要传入符合约束类型的值, 必须包含必须的属性
loggingIdentity({length:3,value:10})

在泛型约束中使用类型参数

我们可以声明一个类型参数，且它被另一个类型参数所约束
比如: 我们想要用属性名从对象里获取这个属性，并且我们想要保证这个属性存在于对象 obj上.因此我们需要在这两个类型之间使用约束

约束第二参数,使用泛型K, 对于任意类型的 K 必须是 T 中的键l 返回值是 对象[键]这种形式，也就是 T[K],
keyof 这种形式就是索引类型

function getProperty<T, K keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
let x = { a: 1, b: 2, c: 3, d: 4 }

getProperty(x, 'a')
getProperty(x, 'm') // Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'

在泛型里使用类类型

在TS使用泛型创建工厂函数时, 需要引用钩子函数的类类型.

function create<T>(c: {new():T;}):T{
  return new c()
}

一个更高级的例子，使用原型属性推断并约束构造函数与类实例的关系

class BeeKeeper {
  hasMask: boolean
}

class ZooKeeper {
  nametag: string;
}

class Animal {
  numLegs: number;
}

class Bee extends Animal {
  keeper: BeeKeeper
}

class Lion extends Animal {
  keeper: ZooKeeper
}

function createInstance<A extends Animal>(c: new () => A): A {
  return new c()
}
createInstance(Lion).keeper.nametag
createInstance(Bee).keeper.hasMask

posted @ 2020-08-26 23:30 荣光无限阅读(294) 评论(0) 编辑收藏举报

刷新页面返回顶部

荣光无限