• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript中使用泛型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

介绍

这里引入官网一段介绍,了解个大概:

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

 

认识泛型的作用

很多时候我们无法准确定义一个类型,它可以是多种类型,这种情况下我们习惯用 any 来指定它的类型,代表它可以是任意类型。any 虽好用,但是它并不是那么安全的,这时候应该更多考虑泛型。

 

为了理解泛型的作用,举个例子说明。我们来创建下面这样的一个函数,传入什么参数就返回什么参数,这个函数可以看成是一个 echo 命令:

function echoValue(arg: any): any {
  return arg
}

为了不限制传入的参数类型,所以使用 any 类型。此函数咋一看是没问题的,但是缺丢失了一些信息,即传入的类型与返回的类型应该是相同的,使用 any 不能保证这一点。使用 any 不是一个安全的方案,比如我们来改变一下这个函数,返回传入值的 length :

function echoValue(arg: any): any {
  return arg.length
}

这样写不会报任何错误,因为 arg 可以是任意值,所以不管做什么操作都是可以的。但如果函数传入的参数是 number 类型的,显然它是没有 length 属性的,那么执行时程序就会报错了。例子虽然很牵强,但也能说明问题,any 的不确定性,注定会带来各种问题,如果动不动就使用 any,那么也失去了使用 typescript 的意义。

 

现在我们使用泛型的方法来改写上面例子:

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

T 是类型变量,它是一种特殊的变量,只用于表示类型而不是值,使用 <> 定义。定义了类型变量之后,你在函数中任何需要指定类型的地方使用 T 都代表这一种类型,这样也能保证返回值的类型与传入参数的类型是相同的了。

 

我们将这个版本的 echoValue 函数称作“泛型”,因为它适用于多种类型。定义了泛型函数后,有两种方法调用它,第一种明确指定 T 的类型:

echoValue<string>('hello world')

第二种方法就是直接调用,更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定 T 的类型:

echoValue('hello world')

 

当定义泛型时,不符合的操作都会报错,比如返回传入值的 length 时:

function echoValue<T>(arg: T): T {
  return arg.length  // error,类型“T”上不存在属性“length”
}

 

使用泛型变量

需要认识到泛型变量 T 可以是整个类型,也可以是某个类型的一部分,比如:

function echoValue<T>(arg: T[]): T[] {
  console.log(arg.length)
  return arg
}

定义泛型变量 T,函数参数是各元素为 T 类型的数组类型,返回值是各元素为 T 类型的数组元素。

 

T 并不是固定的,你可以写成 A、B或者其他名字,而且可以在一个函数中定义多个泛型变量,如下面这个例子:

function getArray<T,U>(arg1: T, arg2: U): [T,U]{
  return [arg1, arg2]
}

我们定义了 T 和 U 两个泛型变量,第一个参数指定 T 类型,第二个参数指定 U 类型,函数返回一个元组包含类型 T 和 U。

 

泛型类型

我们可以定义一个泛型函数类型,泛型函数的类型与非泛型函数的类型没什么不同,只是有一个类型参数在最前面。

 

直接定义:

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

 

使用类型别名定义:

type EchoValue = <T>(arg: T) => T
let echoValue: EchoValue = function<T>(arg: T): T {
  return arg
}

 

使用接口定义:

interface EchoValue{
  <T>(arg: T): T
}
let echoValue: EchoValue = function<T>(arg: T): T {
  return arg
}
// 可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以
let echoValue2: EchoValue = function<U>(arg: U): U {
  return arg
}

 

对于接口而言,我们可以把泛型参数当作整个接口的一个参数,这样我们就能清楚的知道使用的具体是哪个泛型类型。如下:

// 泛型变量作为接口的变量
interface EchoValue<T>{
  (arg: T): T
}
let echoValue: EchoValue<string> = function<T>(arg: T): T {
  return arg
}
echoValue(123) // error,类型“123”的参数不能赋给类型“string”的参数

let echoValue2: EchoValue<number> = function<U>(arg: U): U {
  return arg
}
echoValue2(123)

 

泛型类

泛型类看上去与泛型接口差不多。 泛型类使用( <>)括起泛型类型,跟在类名后面。

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

// T 为 number 类型
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

// T 为 string 类型
let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };

 类有两部分:静态部分和实例部分, 泛型类指的是实例部分的类型,所以类的静态属性不能使用这个泛型类型。

 

泛型约束

我们有时在操作某值的属性时,是事先知道它具有此属性的,但是编译器不知道,就如上面有个例子,我们访问 arg.length 是行不通的:

function echoValue<T>(arg: T): T {
  console.log(arg.length) // 类型“T”上不存在属性“length”
  return arg
}

 

现在我们可以通过泛型约束来对泛型变量进行约束,让它至少包含 length 这一属性,具体实现如下:

// 定义接口,接口规定必须有 length 这一属性
interface Lengthwise{
  length: number
}

// 使用接口和 extends 关键字实现约束,此时 T 类型就必须包含 length 这一属性
function echoValue<T extends Lengthwise>(arg: T): T {
  console.log(arg.length) // 通过,因为被约束的 T 类型是包含 length 属性的
  return arg
}

现在这个泛型函数被定义了约束,因此它不再是适用于任意类型:

echoValue(3) // 类型“3”的参数不能赋给类型“Lengthwise”的参数

echoValue({value: 3, length:10}) // right

echoValue([1, 2, 3]) // right

 

泛型约束中使用类型参数

当我们定义一个对象,想对它做一个要求,即只能访问对象上存在的属性,该怎么做?来看看这个需求的样子:

const getProps = (obj, propName) => {
  return obj[propName]
}

const o = {a: 'aa', b: 'bb'}

getProps(o, 'c') // undefined
我们都知道当访问这个对象的’c’属性时,这个属性是没有的,但是在开发时是不会提醒报错的。在 typescript 中,我们可以实现对这个问题的检查,要使用到一个 keyof 关键字:
const getProps = <T, K extends keyof T>(obj: T, propName: K) => {
  return obj[propName]
}

const o = {a: 'aa', b: 'bb'}

getProps(o, 'c') // error,类型“"c"”的参数不能赋给类型“"a" | "b"”的参数
这里我们使用让 K 来继承索引类型 keyof T,可以理解 keyof T 相当于一个由泛型变量 T 的属性名构成的联合类型,这里的 K 就被约束为了只能是 'a' 或 'b',所以当我们传入字符串 'c' 想要获取对应属性时就会报错。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap