TypeScript完全解读(26课时)_6.TypeScript完全解读-泛型

我不是女神ヾ 2021-11-23 22:32 346阅读 0赞

# 6.TypeScript完全解读-泛型 #

![87548-20190505221514275-758142544.png][]

创建实例ts文件generics.ts

![87548-20190505232520169-1617576689.png][]

在index.ts内引入

![87548-20190505232555267-1477766207.png][]

fill是填充数组，创建的数组的元素数是times，填充的值就是接收的value的值

![87548-20190505232218852-984062979.png][]

这里传入一个2的数量，这样返回的就是5个2的数组

![87548-20190505232706367-1167248277.png][]

![87548-20190505232747344-1373506142.png][]

![87548-20190505233108821-1234141335.png][]

返回每个都+1的结果

![87548-20190505233248846-1054082080.png][]

返回每个元素的length这样就是有错误的，因为我们的数值类型是没有length这个属性的

![87548-20190505233355155-1837231265.png][]

传入字符串，是有length属性的

![87548-20190505233511795-2128667751.png][]

虽然是可以，但是丢失了类型的检测。这里我们就需要用到泛型

使用泛型约束函数的类型

泛型变量T，调用函数的时候会手动传入这个类型，T就代表固定的一种类型，这样传入的value的值类型也是T，最终函数返回的类型也是T类型的数组

![87548-20190505233908835-452976484.png][]

调用的时候传入类型T为number类型。number类型是不存在属性length的

![87548-20190505234050693-2071510978.png][]

我们调用他的toFixed方法是可以的。这个就是泛型的简单使用

![87548-20190505234215309-425512252.png][]

const getArray = <T>(value: T, times: number = 5): T[] =>{
        return new Array(times).fill(value)
    }
    
    console.log(getArray<number>(123, 3).map((item) => item.toFixed()))

详细讲下泛型变量，T就是泛型变量，但是T不是固定写法，可以换成u换成k都是可以的，一般习惯性用一个大写的字母，一般T用的比较多，这样就能保证我们指定返回类型

复杂一点的例子，用了两个泛型变量

![87548-20190505234949980-693728344.png][]

循环输出元素的第一个值和第二个值

![87548-20190505235134275-1037657728.png][]

第一个元素是数值类型，调用length就会报错，第二个元素是字符串类型，调用toFixed也会报错

在调用getArray的方法的时候，并没有明确的传入类型，如果我们不传的话，ts编辑器也会根据我们传入的值推断出类型

![87548-20190505235228953-1614556021.png][]

当然也可以明确的制定参数的类型

![87548-20190505235443633-755583572.png][]

const getArray = <T, U>(param1: T, param2: U, times: number): Array<[T, U]> => {
        return new Array(times).fill([param1, param2])
    }
    //console.log(getArray(1, 'a', 3))
    getArray<number, string>(1, 'a', 3).forEach((item) =>{
        console.log(item[0])
        console.log(item[1])
    })

# 泛型在类型定义中的使用 #

可以使用泛型定义泛型函数类型

这样调用就会报错

![87548-20190506000124111-2113186600.png][]

# 接下来使用类型别名定义泛型函数类型 #

![87548-20190506000345955-203812197.png][]

type GetArray = <T>(arg: T, times: number) => T[]
    let getArray: GetArray = (arg: any, times: number) => {
        return new Array(times).fill(arg)
    }

# 接口的形式定义泛型函数类型 #

![87548-20190506000653554-475035743.png][]

interface GetArray {
        (arg: any, times: number): any[]
    }

使用泛型的形式

![87548-20190506000822874-727838448.png][]

我的电脑上没有自动变成类型别名的形式

interface GetArray {
        <T>(arg: T, times: number): T[]
    }

泛型变量还可以提到接口的最外层

![87548-20190506000932469-1554413572.png][]

interface GetArray<T> {
        (arg: T, times: number): T[]
    }

除了定义函数，还可以添加属性，只要把泛型变量放到最外层，里面所有地方都可以使用这个泛型变量

![87548-20190506001049894-909926210.png][]

# 泛型约束 #

泛型约束对泛型变量的条件限制

![87548-20190506001322974-1453413004.png][]

![87548-20190506001417626-1561629298.png][]

现在想对T有个要求，不能随便传任何值，只能传带length属性的(数组、字符串、自定义的对象里面写个length属性)

这里传递的是一个数组是可以的

![87548-20190506001559031-2051784562.png][]

传入数字目前是可以的,我们要实现传入数字让不可以。因为数字是没有length的属性的

![87548-20190506001643003-1175384441.png][]

我们这个泛型变量加限制

![87548-20190506001856125-1472997129.png][]

interface ValueWithLength {
        length: number
    }
    const getArray = <T extends ValueWithLength>(arg: T, times) =>{
        return new Array(times).fill(arg)
    }
    getArray([1, 2], 3)
    getArray(123, 3)

传入字符串就不报错， 因为字符串有length的了属性

![87548-20190506001931277-1788549055.png][]

传入一个对象手打一个length属性也是可以的

![87548-20190506002017203-1645340211.png][]

这里就是使用extends来限制泛型变量，这就是泛型约束

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

定义一个对象，只能访问对象上存在的属性时就用到了

定义一个函数，传入对象和属性名称，返回对象上的这个属性名称

![87548-20190506002324401-765347190.png][]

#  ![87548-20190506002520542-1905262785.png][] #

对这个函数提供类型的提示，让使用这个函数的人在编译阶段就意识到这个错误。这个时候就是用泛型变量

keyof是个索引类型，在后面高级类型的时候会讲到，

keyof T：可以理解为 返回T这个对象上所有的属性名构成的数组

![87548-20190506002819333-65647222.png][]

const getProp = <T, K extends keyof T>(object: T, propName: K) => {
        return object[propName]
    }
    const objs = {
        a: 'a',
        b: 'b',
    }
    getProp(objs, 'a')
    getProp(objs, 'c')

转载于:https://www.cnblogs.com/wangjunwei/p/10783364.html

[87548-20190505221514275-758142544.png]: /images/20211122/94b845d99822481fb8564273d5011725.png
[87548-20190505232520169-1617576689.png]: /images/20211122/170783e231cc4c94800ed1c8fe049054.png
[87548-20190505232555267-1477766207.png]: /images/20211122/8854935dabae4fe28ccaa7cb44607e7e.png
[87548-20190505232218852-984062979.png]: /images/20211122/e84963be57ca47759af493f1d153997a.png
[87548-20190505232706367-1167248277.png]: /images/20211122/9a2dccfb55c84884a797d05a7804e641.png
[87548-20190505232747344-1373506142.png]: /images/20211122/057e2ffce6974045ad6804edf01015d5.png
[87548-20190505233108821-1234141335.png]: /images/20211122/38c8b62352974c4aa5cd0934fcd1776d.png
[87548-20190505233248846-1054082080.png]: /images/20211122/d7205c993e2d4f77a0d8054a2b657ea6.png
[87548-20190505233355155-1837231265.png]: /images/20211122/c716f2177f4549ccabc351de70532c3d.png
[87548-20190505233511795-2128667751.png]: /images/20211122/4f893cf1ddb84b728e8b13fb8debf14b.png
[87548-20190505233908835-452976484.png]: /images/20211122/d10b8b2669e644ee87b9f7b1a18e8b49.png
[87548-20190505234050693-2071510978.png]: /images/20211122/fa23df99d0f343a39831ceadd842aefa.png
[87548-20190505234215309-425512252.png]: /images/20211122/96e7386348ad4c0da3f29217090553da.png
[87548-20190505234949980-693728344.png]: /images/20211122/bcda9233d15b45c08d1470c11c111d07.png
[87548-20190505235134275-1037657728.png]: /images/20211122/b9792021496b43a4a4fe08b06af02fed.png
[87548-20190505235228953-1614556021.png]: /images/20211122/ef57c700f9a34b08b52aa7ab6df01aa2.png
[87548-20190505235443633-755583572.png]: /images/20211122/0b5320cc12f54e779b057c841a837063.png
[87548-20190506000124111-2113186600.png]: /images/20211122/0a37317677f94d84b995f54c032ac403.png
[87548-20190506000345955-203812197.png]: /images/20211122/f81e05daf8ff4756bac8a3011150470b.png
[87548-20190506000653554-475035743.png]: /images/20211122/23f80a0aaf0541e79ab2f3f99f410360.png
[87548-20190506000822874-727838448.png]: /images/20211122/8e073300f146465a90bf4b581428ee03.png
[87548-20190506000932469-1554413572.png]: /images/20211122/766a15f285b84e50b8fc78d2d76bde7c.png
[87548-20190506001049894-909926210.png]: /images/20211122/fe075910cb174dde88d346a25a567e70.png
[87548-20190506001322974-1453413004.png]: /images/20211122/3191b14550df4de888e1285a5868803b.png
[87548-20190506001417626-1561629298.png]: /images/20211122/cdc787fc7417436f8056128e5e939550.png
[87548-20190506001559031-2051784562.png]: /images/20211122/b4d475507b89415d987fe8f1ab4ad19a.png
[87548-20190506001643003-1175384441.png]: /images/20211122/ceb01d64a32143a78aef4ef77eeb7b0e.png
[87548-20190506001856125-1472997129.png]: /images/20211122/c850fe9c39e5459db004687770ff383e.png
[87548-20190506001931277-1788549055.png]: /images/20211122/9b251184ec834bc49514bffb9822c3b9.png
[87548-20190506002017203-1645340211.png]: /images/20211122/665bf0fa87b94dda955b2248e53d709c.png
[87548-20190506002324401-765347190.png]: /images/20211122/9f8560a4386b4c6abcf0ba3074d78cf7.png
[87548-20190506002520542-1905262785.png]: /images/20211122/6a66a757c9f34a8ea4adb5b8dbf62f99.png
[87548-20190506002819333-65647222.png]: /images/20211122/c75c99b9f240414d81a4f5d8dd909d52.png