Vue 中使用 typescript的方法详解(3)

答1.1:因为我们定一个Phone这个类,没有对phone、condition这些字段通过constructor进行初始化,所以需要在属性上使用 显式赋值断言来帮助类型系统识别类型,这样能够让属性会被间接地初始化。答1.2:前面括号里面的类型标注是Vue提供的类型检查。冒号后面的是为TS提供的类型标注。

2. 编写一个函数

这里我们将使用到js的接口,它经常用于定义复杂的参数类型和返回值类型。

Vue 中使用 typescript的方法详解

上面的例子,我们需要为opts这个参数定义类型,方便后面编码时的使用,这时我们就需要编写一个接口来对它进行类型定义。这个接口里面包括三个必须属性和一个可选属性。必须属性在对象初始化的时候必须赋值,但是有时候某个对象中的属性可以被忽略的,不一定会被需要。我们可以将它设置为可选项。

随着业务的发展,一些参数的字段会变的越来越多,越来越复杂。可能你想有没有什么一劳永逸的方法,让接口更加简单,甚至让它自动的适应业务的变化。于是我想出了这样的代码:

Vue 中使用 typescript的方法详解

上面的代码: 定义了一个键为string,他的值为number或string类型的接口,并且该接口的所有字段都是可选的,你甚至可以传入一个空对象。所以我们可以使用上面的接口可以代替下面的接口,但是反之不行.

然而我们不应该去绕开这些检查,因为这样ts就不会为你检查使用接口的对象应该存在那些属性或者方法了。使用ts的意义就被大大减弱了。

3. 编写第三方依赖

在日常的开发过程中,我们经常会遇到将第三方依赖引入到 TS 项目中没有类型检查的问题,这往往是因为这些项目没有提供类型定义文件。这个时候,我们可以手动为这些第三方库编写类型定义文件,类型定义文件在编译后会被完全忽略,所以并不会对现有代码产生影响。以上面这个较为复杂的函数为例,它的作用是将传入的所有的参数的所有字段合并到一个新的对象中并返回,尽管他的功能比较简单,但是为它编写类型定义还是需要一些 TS 的技巧。

Vue 中使用 typescript的方法详解

1. 外部模块声明: 首先我们需要创建一个拓展名为 .d.ts 的文件,并在其中声明一个模块,声明的模块名称需要跟我们在其他文件中引入的路径相同。

Vue 中使用 typescript的方法详解

2. 类型参数——泛型:首先让我们考虑最简单的情况,当传入一个参数的时候,extend 函数应该返回与参数类型相同的对象,但是我们在编写函数的时候并不知道用户会传入何种类型的参数,所以我们可以定义一个类型参数 T1,这时,extend 就被称为泛型函数,T1 也被称做泛型参数。在上面的例子中,extend 函数接受一个类型为 T1 参数并返回一个类型为 T1 的值,T1 需要用户手动传入,还好 TS 足够聪明,在绝大多数情况下,TS 可以根据参数类型来自动推断类型参数,免去了我们输入类型参数的繁琐步骤。只接受一个参数的 extend 函数并没有很复杂,我们可以继续考虑一些更复杂的情况。

Vue 中使用 typescript的方法详解

这次让我们定义一个接受三个参数的 extend 函数,同时它也接受三个泛型参数,而它返回值类型呢,则是 T1, T2, T3 的交叉类型。交叉类型让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性,相当于对这些类型的成员求并集。 例如, T1 & T2 & T3 这个类型的对象同时拥有了这三种类型的成员。在这里,交叉类型就满足了我们对 extend 函数返回值类型的要求。值得注意的是,实际的 extend 函数可以接受不定个数的参数,也就是说,我们为它编写的类型定义也需要同时兼容接受不定个数参数的情况,这就需要 TS 提供的函数重载功能。

Vue 中使用 typescript的方法详解

3. 重载:在大多数静态类型编程语言中,编译器允许存在参数类型、个数不同的多个同名函数,这个特性被称为函数重载。TS 支持函数重载的特性,所以我们可以定义多个接受不同数量参数的 extend 方法,在用户调用时,TS 会自动的在这些同名函数中选择正确的重载定义。有了函数重载的帮助,我们可以在使用 extend 的大多数场景下享受到类型检查的好处,只有在参数个数超过4个的时候,TS 才无法推断出返回值类型。需要注意的是在 JS 中,运行时并不提供函数重载的能力,我们无法定义多个同名函数,即使他们接受的参数数量并不相同,为了实现函数重载的效果,开发人员需要手动在单个函数中对参数的类型、数量做出判断。

Vue 中使用 typescript的方法详解

到这里我们的第三方声明就完成了,即使一个简单函数的第三方声明,我们也运用了很多ts的相关知识。

个人感受

前面我们讲解了,使用在vue中使用ts能带给我们的种种便利,现在就我个人感受而言,说一下美中不足的地方。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ac6357cb2e230d433fb007db26c3dc72.html