Vue 中使用 typescript的方法详解
什么是typescript
typescript为javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。typescript在编译期会去掉类型和特有语法，生成纯粹的JavaScript。
Typescript5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。
安装typescript
npminstall-gtypescript tscgreeter.ts
举个栗子
左右对比可以看出typescript在编译期会去掉类型和特有语法，生成纯粹的JavaScript。greeter.ts
interfacePerson{
firstName:string;
lastName:string;
}
functiongreeter(person:Person){
return"Hello,"+person.firstName+""+person.lastName;
}
letuser={firstName:"Jane",lastName:"User"};
greeter.js
functiongreeter(person){
return"Hello,"+person.firstName+""+person.lastName;
}
varuser={firstName:"Jane",lastName:"User"};
为什么需要使用它？
优势：
- 静态类型检查
- IDE智能提示
- 代码重构
- 可读性
1.静态类型检查
静态类型检查首要优点就是能尽早的发现逻辑错误，而不是上线之后才发现。
1.1类型分析
传参过程字段错误，或类型错误使用。（进行参数标注后，在编码过程中即可检查出错误。)
1.2类型推断：函数的返回值可通过ts类型推断得出.这一步骤是在编译时进行在编译时进行类型分析
example：eg1:我在使用ts写vue-router的动态路径参数时就发现了一个问题,动态路径参数以冒号开头path:'/user/:id',我们会误认为id为一个number,如果使用ts你将得到提示我们应该传入一个string类型的id.传入一个number类型的id可能并不会出错,js会对它进行隐式类型转换,但是传入一个string会使它更安全和规范.
eg2:个人使用后的效果
interfacePerson{
firstName:string;
lastName:string;
}
functiongreeter(person:Person):string{
return"Hello,"+person.firstName+""+person.lastName;
}
letuser={firstName:1223,lastname:"User"};
greeter(user);
2.智能补全
在编写代码时ide就会提示函数签名.
interfacePerson{
firstName:string;
lastName:string;
}
/**
*问候语句
*@param{Person}person
*@returns{string}
*/
functiongreeter(person:Person):string{
return"Hello,"+person.firstName+""+person.lastName;
}
/**
*helloword!
*
*@param{string}word
*@returns{string}
*/
functionHello(word:string):string{
return"hello,"+word;
}
export{greeter,Hello};
直接将这个ts文件引入到其他ts文件中，不仅补全了所有的参数类型，还告诉你需要填入一个参数，并且你只有填入一个Person类型的对象才不会报错。(智能补全和参数校验）
3.在重构上
动态一时爽,重构火葬场.
typescript在重构上的优势，我们主要从三方面说明。
- 重命名符号，可将一切引用的地方都进行修改。
- 在vscode中如果我们想修改函数、变量或者类的名称,我们可以使用重命名符号的功能,在当前项目中正确的修改所有的引用.这个既可以在ts中使用,也可以在js中使用，而它的底层实现都是依靠ts的语法分析器实现的。
- 自动更新引用路径（vscode）。
- 在重构的过程中，我们可能需要移动文件的路径，这往往会导致其他地方的import失效，这时候vscode提供了自动更新引用路径的功能。它的底层实现也是依靠ts的语法分析器实现的。
- 校验函数签名。
有时候我们会重构类或函数的签名，如果有引用到的地方忘记修改，除了运行时候能发现，其他时候往往难以察觉，且ESLint也只能是排查简单的问题，所以出了BUG会非常麻烦。而TypeScript不一样，在编码时就能及时的发现哪里错了，哪里应该改动但没有修改。
[函数签名MDN][5]
4.可读性
可读性上，TypeScript明显占优，查看开源代码时，如果注释不是很完善，往往会看的云里雾里，而TypeScript在同等条件下，至少有个类型，能让自己更容易明白代码的参数、返回值和意图。
TS+Vue初探
配置
在正式开发之前，我们需要了解一些基本的配置。
1.tsconfig.json是ts项目的编译选项配置文件.在ts项目中如果你不添加这份文件，ts会使用默认的配置.扫描二维码获取配置项目。
- ts-loader：Webpack的TypeScript加载器，就是为了让webpack编译.ts.tsx文件。
- TSLint：.ts.tsx文件的代码风格检查工具。（作用类似于ESLint）
- vue-shim.d.ts：由于TypeScript默认并不支持*.vue后缀的文件，所以在vue项目中引入的时候需要创建一个vue-shim.d.ts文件，放在项目根目录下，例如src/vue-shim.d.ts。
在Vue里面写TS的方式
图中内容应写在script中的lang="ts"。
上图：使用Vue.extend的基础用法。
vue-class-component&vue-property-decorator
vue-class-component强化Vue组件，使用装饰器语法使Vue组件更好的跟TS结合使用。vue-property-decorator在vue-class-component的基础上增加了更多与Vue相关的装饰器，使Vue组件更好的跟TS结合使用。
这两者都是离不开装饰器的，（decorator）装饰器已在ES提案中。Decorator是装饰器模式的实践。装饰器模式呢，它是继承关系的一个替代方案。动态地给对象添加额外的职责。在不改变接口的前提下，增强类的性能。下面我们以钢铁侠为例讲解如何使用ES7的decorator。
以钢铁侠为例，钢铁侠本质是一个人，只是“装饰”了很多武器方才变得那么NB，不过再怎么装饰他还是一个人，它本质是没有被改变的。所以，装饰器没有改变其继承关系，但也同样能够为它添加很多厉害的技能。简单的说，装饰器是在不修改一个类的继承关系的前提下，为一个类修改或添加成员。
typescriptVSJavaScript
了解了上面的基础知识，现在我将同一段代码分别使用js和ts来书写，现在我们来对比他们之间的差别。
Props(Properties)使用js，我们有很多中方式来定义组件的Props，但是大多都掺杂了Vue的私有特征，与ES格格不入，例如左边的代码，明明我们是把这个对象的prop属性定义成为了一个包含两个string元素的对象，但是我们却可以直接通过这个对象来访问"name"字段，这很明显是不符合ES语义的。再来看看右边的TS选手，通过Prop装饰器把指定的字段标记为了Prop，既保留了ES语法的语义，而且还能与Vue完美的配合，更棒的是，我们可以在编码的过程中享受TS对Prop字段的静态类型检查。Method和data再来看看Method，JS中定义method还是有我们上面提到的那个不符合ES语义的毛病。而在TS中，method不需要额外的装饰器——实例方法就会自动成为Vue组件的method。类似的还有data，使用TS的语法，实例字段即可自动成为Vue组件的data。Computed在传统的使用JS编写的Vue代码中，如果要定义计算属性，我们需要在computed属性中定义相应的函数。而这在ES中其实早就已经有了对应语义的语法——getter，所以在使用了vue-class-component的vue组件中，我们可以直接使用getter来定义计算属性，不管是在语法上还是在语义上，相比普通的JS都略胜一筹
总结：我们使用vue-class-component让vue组件的定义更加符合ES语义，使得TS能够更好的进行语法分析，并基于此进行类型检查。
业务场景中使用TS+Vue
1.在Vue项目中定义data和props
自我自答环节：
答1.1：因为我们定一个Phone这个类，没有对phone、condition这些字段通过constructor进行初始化，所以需要在属性上使用显式赋值断言来帮助类型系统识别类型，这样能够让属性会被间接地初始化。答1.2：前面括号里面的类型标注是Vue提供的类型检查。冒号后面的是为TS提供的类型标注。
2.编写一个函数
这里我们将使用到js的接口，它经常用于定义复杂的参数类型和返回值类型。
随着业务的发展，一些参数的字段会变的越来越多，越来越复杂。可能你想有没有什么一劳永逸的方法，让接口更加简单，甚至让它自动的适应业务的变化。于是我想出了这样的代码：
上面的代码：定义了一个键为string，他的值为number或string类型的接口，并且该接口的所有字段都是可选的，你甚至可以传入一个空对象。所以我们可以使用上面的接口可以代替下面的接口,但是反之不行.
然而我们不应该去绕开这些检查，因为这样ts就不会为你检查使用接口的对象应该存在那些属性或者方法了。使用ts的意义就被大大减弱了。
3.编写第三方依赖
在日常的开发过程中，我们经常会遇到将第三方依赖引入到TS项目中没有类型检查的问题，这往往是因为这些项目没有提供类型定义文件。这个时候，我们可以手动为这些第三方库编写类型定义文件，类型定义文件在编译后会被完全忽略，所以并不会对现有代码产生影响。以上面这个较为复杂的函数为例，它的作用是将传入的所有的参数的所有字段合并到一个新的对象中并返回，尽管他的功能比较简单，但是为它编写类型定义还是需要一些TS的技巧。
个人感受
前面我们讲解了，使用在vue中使用ts能带给我们的种种便利，现在就我个人感受而言，说一下美中不足的地方。
1.即使使用了ts，template部分仍没有静态类型检查和IDE智能提示，但官方成员表示在以后的Vue单文件中会提供这项功能。2.将Vue单文件组件引入TS文件中，无法正确的提示其文件位置。3.Vue周边工具，比如Vuex，它对ts的支持薄弱，大量的功能难以直接迁移到ts中，并且没有好的官方支持的方案。4.毫无疑问，使用TS进行开发，相比于JS，我们需要花费更多的时间和精力。
总结
以上所述是小编给大家介绍的Vue中使用typescript的方法详解，希望对大家有所帮助！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。