TS泛型

80 阅读2分钟

##什么泛型

泛型的类型变量可以有多个,并且类型之间还可以约束(比如,第二个类型变量受第一个类型变量约束)。 比如,创建一个函数来获取对象中属性的值:

image.png

1、泛型函数

  • 首先,我们来实现一个函数 createArray, 它可以创建一个指定长度的数组,同时将每一项都填充一个默认值

image.png Array<any> 允许数组的每一项都为任意类型, 但是我们预期的是,数组中每一项都应该是输入的 value 的类型。这时候,泛型就派上用场了:

image.png 上例中,我们在函数名后添加了 <T>,其中 T 用来指代任意输入的类型,在后面的输入 value: T 和输出 Array<T> 中即可使用了。

接着在调用的时候,可以指定它具体的类型为 stringnumber。当然,也可以不手动指定,而让类型推论自动推算出来:

image.png 泛型 T 作用域只限于函数内部使用

2、泛型类

image.png

3、泛型接口

定义接口的时候也可以指定泛型

  • 使用含有泛型的接口来定义对象的形状:

image.png

4、多个类型参数

定义泛型的时候,可以一次定义多个类型参数:

image.png

5、默认泛型类型

在 TypeScript 2.3 以后,我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推测出时,这个默认类型就会起作用。

image.png

6、泛型约束

image.png 上例中,泛型 T 不一定包含属性 length,所以编译的时候报错了。

这时,我们可以对泛型进行约束,只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束

image.png 上例中,我们使用了 extends 约束了泛型 T 必须符合接口 LengthWith 的形状,也就是必须包含 length 属性。

此时如果调用 logger 的时候,传入的 val 不包含 length,那么在编译阶段就会报错了:

image.png

2.2##vue2 Object.defineProperty()

vue2的双向数据绑定(又称响应式)原理,是通过数据劫持结合发布订阅模式的方式来实现的,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。 image.png