当前位置: 首页 > 科技观察

面试官:谈谈你对TypeScript中泛型的理解?应用场景?

时间:2023-03-22 12:15:38 科技观察

本文转载自微信公众号《JS日报》,作者灰灰。转载本文请联系JS每日一问公众号.1.什么是泛型编程(genericprogramming)是一种编程语言的一种风格或范式泛型允许我们在用强类型编程语言编写代码时使用一些后面指定的类型,作为实例化时的参数在typescript中指示这些类型,在定义一个函数、接口或类时,并不是预先定义具体的类型,而是使用时指定类型的一个特性假设我们使用一个函数,它接受一个数字参数,返回一个数字参数,写法如下:functionreturnItem(para:number):number{returnpara}如果我们打算接受一个string类型,然后返回string类型,那么这样写:functionreturnItem(para:string):string{returnpara}上面两个最明显的问题之一写法上就是代码重复比较高,虽然可以用任何类型来代替,但是这不是一个好的解决方案,因为我们的目的是接收什么类型的参数,返回什么t参数的类型,也就是我们只能通过运行时传入的参数来判断类型。在这种情况下,可以使用泛型,如下图:以<>的形式表示,可以声明:Functioninterfaceclassfunctiondeclaration声明函数如下:"例如,我们可以同时定义泛型T和泛型U:functionswap(tuple:[T,U]):[U,T]{return[tuple[1],tuple[0]];}swap([7,'seven']);//['seven',7]接口声明声明接口如下:interfaceReturnItemFn{(para:T):T}那么当我们想传入一个数字作为参数,可以这样声明函数:constreturnItem:ReturnItemFn=para=>para当类声明使用泛型声明类时,可以作用类本身也可以作用于类的成员函数。下面简单实现一个同类型元素的栈结构,如下:push(item)}publicpop(){this.arr.pop()}}的使用方法如下:conststack=newStacn()如果上面只能传string和number类型,那么可以使用猜测的方法来实现”constrainedgenerics”,如下图:除了上面的形式,泛型更高级的用法如下:比如设计一个函数,这个函数接受两个参数,一个参数是对象,另一个参数是对象的一个??属性。我们通过这两个参数返回这个属性的值。此时设计泛型索引类型和约束类型共同实现索引类型,约束类型索引类型keyofT,取出传入对象的属性类型生成联合类型。这里把泛型U约束在这个union类型中,如下:第一个参数是对象类型,因为默认的对象是指{},我们接收到的对象是各种各样的。通用类型用于表示传入的对象类型。例如Textendsobject的使用如下图所示:比如多类型约束需要实现两个接口的类型约束:interfaceFirstInterface{doSomething():number}interfaceSecondInterface{doSomethingElse():string}可以创建继承上述两个接口的接口,如下:interfaceChildInterfaceextendsFirstInterface,SecondInterface{}正确的使用方法如下:通用道具erty.doSomething()this.genericProperty.doSomethingElse()}}通过泛型约束,可以达到多类型约束的目的。3.应用场景经过上面的初步了解,我们在写typescript的时候会定义函数、接口或者类的时候使用,具体的类型并不是事先定义好的,而是在使用的时候指定了该类型的一个特性,在这种情况下,泛型可以用来灵活定义类型,这是掌握typescript的必经之路参考https://www.tslang.cn/docs/handbook/generics.html