Vue-cli3中如何使用TS语法

这篇文章主要讲解了“Vue-cli3中如何使用TS语法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue-cli3中如何使用TS语法”吧！类型检查、直接编译到原生js、引入新的语法糖TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的脚。vue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持tsvue-property-decorator：基于vue-class-component扩展更多装饰器ts-loader：让webpack能够识别ts文件tslint-loader：tslint用来约束文件编码tslint-config-standard： tslint 配置 standard风格的约束webpack配置根据项目的不同配置的地方不同，如果是vu免费云主机域名e cli 3.0创建的项目需要在vue.config.js中配置，如果是3.0以下版本的话，需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)2.1 在webpack.base.conf文件中更改2.1.1. 在resolve.extensions中增加.ts，目的是在代码中引入ts文件不用写.ts后缀2.2.2. 在module.rules中增加ts的rules2.2.3. tsconfig.json配置
ts-loader会检索文件中的tsconfig.json.以其中的规则来解析ts文件，详细的配置可以参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
我项目的tsconfig.json文件2.2.4. tslint.json配置
在目录中新增tslint.json文件，由于我们前面安装了tslint-config-standard，所以可以直接用tslint-config-standard中规则，文件如下:2.2 在vue.config.js文件中更改以下代码即可由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在根目录下vue组件里大多数的方法改成通过@xxx（装饰器）来表明当前定义的为什么数据。业务逻辑js的部分就可以直接采用ts的写法了。基本写法模板template和样式style的写法不变，script的模块进行了改变，写法如下：lang="ts"：script声明当前语言是ts@Component：注明此类为一个vue组件export default class Test extends Vue： export当前组件类是继承vue的data()中定义数据data中的数据由原来的data()方法改成直接在对象中定义生命周期方法props传值props的话就没有data那么舒服了，因为他需要使用装饰器了，写法如下$emit传值不带参数方法带参数emit带参数watch观察数据computed计算属性完整代码案例感谢各位的阅读，以上就是“Vue-cli3中如何使用TS语法”的内容了，经过本文的学习后，相信大家对Vue-cli3中如何使用TS语法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: go语言字符串怎么求指定子串

这篇文章主要讲解了“go语言字符串怎么求指定子串”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“go语言字符串怎么求指定子串”免费云主机域名吧！在go语言中可以利用切片配合“strings.Index()”函数来…