在Vue中使用Typescript的示例代码

Vue中使用的类型脚本

什么是打字稿

Typescript是JavaScript的超集，这意味着它支持所有的javaScript语法。它与JavaScript的强类型版本非常相似，除此之外，它还有一些扩展的语法，比如接口/模块等等。

Typescript将在编译时摆脱其类型和特殊语法，生成纯JavaScript。

Typescript的热度在5年内随时间变化，呈现整体上升趋势。也说明ts越来越受到大家的关注。

安装打字稿

npminstall-g typescript tscgreeter . ts举个栗子

左右对比可以看出，typescript会在编译时去掉类型和特殊语法，生成纯JavaScript。

迎宾员

接口人{ firstName:字符串；lastName:字符串；}函数迎宾员(person: Person) {返回' Hello，' Person . first name ' ' Person . last name；}让用户={名字： 'Jane '，姓氏： ' User ' }；greeter.jsfunction迎宾员(person) {返回' Hello，' person . first name ' ' person . last name；}var user={ firstName: 'Jane '，last name : ' User ' }；为什么需要用？

优点：

静态类型检查IDE智能提示代码重构可读性1。静态类型检查

静态类型检查的第一个优点是它可以尽早发现逻辑错误，而不是在上线后才发现。

1.1类型分析

参数传递过程字段错误，或者类型错误。(参数标注后，可以在编码过程中检查错误。)

1.2类型推断：可以通过ts类型推断函数的返回值。这个步骤在编译时执行

编译时的类型分析

示例：

Eg1:我用ts写vue-router的动态路径参数的时候发现了一个问题。动态路径参数以冒号path: '/user/:id '开头，我们会将id误认为数字。如果您使用ts，您将被提示我们应该传入一个字符串类型的id。传入数字类型的id可能没有错，但是js会隐式转换它。

Eg2:个人使用后的效果

接口人{ firstName:字符串；lastName:字符串；}函数迎宾器(person: Person):字符串{返回' Hello，' Person . first name ' ' Person . last name；}让用户={名字： 1223，姓氏： '用户' }；迎宾员(用户)；

2.智能完井

编写代码时，ide会提示输入函数签名。

接口人{ firstName:字符串；lastName:字符串；}/* * *问候语* @ param {person} person * @返回{ string } */function greeter(person : person): string { return ' hello，' person。名为''的人。姓氏；}/** *你好字！* * @ param { string } word * @返回{ string } */function Hello(word : string): string { return ' Hello，' word；}导出{迎宾员，Hello }；将这个ts文件直接引入到其他ts文件中，不仅完成了所有的参数类型，还告诉你需要填写一个参数，除非填写Person类型的对象，否则不会报错。(智能完井和参数验证)

3.论重建

动感清新，再造火葬场。

主要从三个方面说明了typescript在重构中的优势。

1.重命名符号，可以修改所有引用的位置。

在vs代码中，如果我们想修改函数、变量或类的名称，可以使用重命名符号的功能来正确修改当前项目中的所有引用。这可以用在ts和js中，它的底层实现依赖于ts的解析器。

2.自动更新参考路径(vs代码)。

在重构过程中，我们可能需要移动文件的路径，这往往会导致在其他地方无效导入。此时vs代码提供了自动更新引用路径的功能。它的底层实现也依赖于ts的解析器。

3.检查函数签名。

有时我们重建类或函数的签名。如果有忘记修改的引用，除了在运行时，很难在其他时间检测到它们。而且ESLint只能排查简单的问题，所以bug会很麻烦。另一方面，TypeScript可以在编码时及时发现哪里出错了，哪些应该更改但没有更改。

[函数签名MDN][5]

4.可读性

TypeScript在可读性方面显然更胜一筹。查看开源代码时，如果注释不完善，往往会被人看得云里雾里。在相同的条件下，TypeScript至少有一种类型，这使得更容易理解代码的参数、返回值和意图。

论TS Vue

配置

在正式开发之前，我们需要了解一些基本的配置。

1.tsconfig.json是ts项目的编译选项配置文件。如果不在ts项目中添加此文件，ts将使用默认配置。扫描二维码获取配置项。

ts-loader:webpack的TypeScript加载器是让web pack编译. ts.tsx文件。的代码样式检查工具。ts.tsx文件。(功能类似于ESLint)vue-shim.d.ts:因为TypeScript不支持后缀为*的文件。vue默认情况下，导入vue项目时需要创建一个vue-shim.d.ts文件，并将其放在项目的根目录下，如src/vue-shim.d.ts。

用Vue写TS的方法

图片中的内容应该用文字书写。

上图：使用Vue.extend的基本用法.

下图：基于类的Vue组件

通过对比，我们发现上面的编码方式更接近我们平时的JS编写，但是感觉不到ts类型检查和类型推断。

下图的写法更有助于我们得到ts的类型检查。这就需要我们引入vue类组件。虽然模板无法完成，但脚本中的内容可以更好地完成。让我们来看看vue类组件的功能。

vue类组件vue属性装饰器

Vue-class-component加强了Vue组件，并使用装饰器语法使Vue组件更好地与TS相结合。

Vue-property-decorator在vue-class-component的基础上增加了更多与Vue相关的装饰设备，使Vue组件能够更好的与TS结合。

两者都离不开装饰师。(装饰工)ES提案中已经提出了装饰工。装饰者是装饰者模式的实践。装饰器模式，它是继承关系的替代。动态地向对象添加额外的职责。在不改变接口的情况下提高类的性能。让我们以钢铁侠为例来说明如何使用ES7的装饰器。

以钢铁侠为例。钢铁侠的本质是人。他只是在“装饰”了很多武器后才变得这么NB，但无论他怎么装饰，他的本质都没有改变。因此，装饰器不会改变它的继承关系，但它也可以为它添加许多强大的技能。简而言之，装饰器在不修改类的继承关系的情况下修改或添加类的成员。

装饰器主要接收三个参数：

目标要定义属性的对象。

要定义或修改的属性的名称。

描述符要定义或修改的属性描述符。

下面我们通过代码给一个人增加飞行的功能：

typescript VS JavaScript

了解了上面的基础知识，现在我用js和ts编写了相同的代码，现在我们比较一下它们之间的区别。

1.道具(属性)

使用js，我们有很多方法来定义组件的Props，但是大多数都掺杂了Vue的私有特性，这与es是不兼容的。比如左边的代码明确定义了这个对象的prop属性为包含两个字符串元素的对象，但是我们可以通过这个对象直接访问‘name’字段，这显然不符合es语义。我们来看看右边的TS播放器，通过Prop装饰器将指定的字段标记为Prop，既保留了es语法的语义，又与Vue完美配合。更好的是，我们可以在编码过程中享受到TS对Prop字段的静态类型检查。

2.方法和数据

让我们来看看方法。JS中定义的方法仍然存在我们上面提到的不符合es语义的问题。在TS中，该方法将自动成为Vue组件的方法，无需额外的decorator ——实例方法。同样，也有数据。使用TS的语法，实例字段可以自动成为Vue组件的数据。

3.计算

在JS编写的传统Vue代码中，如果要定义计算属性，需要在计算属性中定义对应的函数。事实上，ES中已经有了一个与语义相对应的语法——getter。因此，在使用vue-class-component的vue组件中，我们可以直接使用getter来定义计算属性，在语法和语义上比普通JS略胜一筹。总结：我们使用vue-class-component，使vue组件的定义更符合ES语义，这样TS就可以在此基础上更好地进行解析和类型化。

在业务场景中使用TS Vue

1.定义Vue项目中的数据和道具

这样的写法，让我有两个疑惑。

1.1为什么使用写作

@道具(号！) propA！号

而不是

@道具(号码)方案：号码

1.2为什么Prop需要前后两次写类型？

自答会话：

回答1.1:因为我们设置了一个叫phone的类，没有通过构造函数初始化Phone、condition等字段，所以需要在属性上使用显式赋值断言，帮助类型系统识别类型，这样可以间接初始化属性。

回答1.2:括号内的类型标记为Vue提供的类型检查。冒号后面是为终端服务提供的类型符号。

2.编写函数

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

在上面的例子中，我们需要为opts定义类型，这便于后面的编码。此时，我们需要编写一个接口来定义它的类型。该接口包括三个必需属性和一个可选属性。初始化对象时必须分配属性，但有时对象中的属性可以忽略，也可能不需要。我们可以让它成为可选的。

随着业务的发展，一些参数的领域会变得越来越复杂。也许你想找到一种方法，让界面一劳永逸地变得更简单，甚至让它自动适应业务变化。所以我想出了这个代码：

上面的代码：定义了一个键为string，值为number或string的接口，接口的所有字段都是可选的，甚至可以传入一个空对象。所以我们可以用上面的接口代替下面的接口，但不能反过来。

但是，我们不应该绕过这些检查，因为ts不会使用接口检查对象中应该存在哪些属性或方法。使用ts的意义被大大削弱。

3.编写第三方依赖项

在日常的开发过程中，我们经常会遇到在没有进行类型检查的情况下，将第三方依赖引入到TS项目中的问题，这往往是因为这些项目没有提供类型定义文件。此时我们可以为这些第三方库手工编写类型定义文件，编译后会完全忽略，所以不会影响现有的代码。以上述复变函数为例。它的功能是将传入的所有参数的所有字段合并到一个新对象中并返回它。虽然它的功能很简单，但是它仍然需要一些ts技巧来为它编写类型定义。

1.外部模块声明：首先，我们需要创建一个名为。并在其中声明一个模块。声明的模块名称需要与我们在其他文件中引入的路径相同。

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

这次，让我们定义一个接受三个参数的扩展函数。同时还接受三个泛型参数，返回值类型为T1、T2、t3、T3的交叉类型。交叉类型允许我们将几个现有的类型叠加到一个类型中，这个类型包含了所有需要的特征，相当于这些类型成员的并集。例如，T1 T2 T3类型的对象同时具有所有三种类型的成员。这里，交叉类型满足了我们对扩展函数返回值类型的要求。值得注意的是，实际的extend函数可以接受不定数量的参数，也就是说我们为其编写的类型定义需要兼容同时接受不定数量的参数，这就需要TS提供的函数重载函数。

3.重载：在大多数静态类型编程语言中，编译器允许多个具有不同参数类型和编号的同名函数。这个特性叫做函数重载。TS支持函数重载的特性，所以我们可以定义多个扩展方法来接受不同数量的参数。当用户调用时，TS会在这些同名函数中自动选择正确的重载定义。在函数重载的帮助下，我们可以在大多数使用extend的场景中享受类型检查的好处。只有当参数个数超过4时，TS才能推断返回值类型。需要注意的是，在JS中，运行库不提供重载函数的能力，我们不能定义多个同名的函数，即使它们接受不同数量的参数。为了达到重载函数的效果，开发人员需要手动判断单个函数中参数的类型和数量。

至此，我们的第三方声明完成。即使对于一个简单的函数，我们也会用到很多关于ts的知识。

个人感觉

前面，我们解释了在vue中使用ts带来的各种便利。现在就我个人的感受来说一下美中不足的地方。

1.即使使用ts，在模板部分仍然没有静态类型检查和IDE智能提示，但官方成员表示，这个功能将在未来的Vue单文件中提供。

2.在TS文件中引入Vue单文件组件，无法正确提示文件位置。

3.Vue外设工具，如Vuex对ts的支持较弱，大量功能难以直接迁移到ts，也没有好的官方支持方案。

4.毫无疑问，使用TS进行开发需要花费比JS更多的时间和精力。