Vue-cli3项目引入Typescript的实现方法
前言
假设已经有一个通过vue-cli3脚手架构建的vue项目
命令行安装Typescript
npminstall--save-devtypescript npminstall--save-dev@vue/cli-plugin-typescript
编写Typescript配置
根目录下新建tsconfig.json,下面为一份配置实例(点击查看所有配置项)。值得注意的是,默认情况下,ts只负责静态检查,即使遇到了错误,也仅仅在编译时报错,并不会中断编译,最终还是会生成一份js文件。如果想要在报错时终止js文件的生成,可以在tsconfig.json中配置noEmitOnError为true。
{ "compilerOptions":{ "target":"esnext", "module":"esnext", "strict":true, "importHelpers":true, "moduleResolution":"node", "experimentalDecorators":true, "esModuleInterop":true, "allowSyntheticDefaultImports":true, "sourceMap":true, "baseUrl":".", "allowJs":false, "noEmit":true, "types":[ "webpack-env" ], "paths":{ "@/*":[ "src/*" ] }, "lib":[ "esnext", "dom", "dom.iterable", "scripthost" ] }, "exclude":[ "node_modules" ] }
新增shims-vue.d.ts
根目录下新建shims-vue.d.ts,让ts识别*.vue文件,文件内容如下
declaremodule'*.vue'{ importVuefrom'vue' exportdefaultVue }
修改入口文件后缀
src/main.js=>src/main.ts
改造.vue文件
.vue中使用ts实例
//加上lang=ts让webpack识别此段代码为typescriptimportVuefrom'vue' exportdefaultVue.extend({ //... })
一些好用的插件
vue-class-component:强化Vue组件,使用TypeScript装饰器增强Vue组件,使得组件更加扁平化。点击查看更多
importVuefrom'vue' importComponentfrom'vue-class-component' //表明此组件接受propMessage参数 @Component({ props:{ propMessage:String } }) exportdefaultclassAppextendsVue{ //等价于data(){return{msg:'hello'}} msg='hello'; //等价于是computed:{computedMsg(){}} getcomputedMsg(){ return'computed'+this.msg } //等价于methods:{great(){}} great(){ console.log(this.computedMsg()) } }
vue-property-decorator:在vue-class-component上增强更多的结合Vue特性的装饰。点击查看更多
import{Vue,Component,Prop,Watch,Emit}from'vue-property-decorator' @Component exportdefaultclassAppextendsVue{ @Prop(Number)readonlypropA:Number|undefined @Prop({type:String,default:''})readonlypropB:String //等价于watch:{propA(val,oldval){...}} @Watch('propA') onPropAChanged(val:String,oldVal:String){ //... } //等价于resetCount(){...this.$emit('reset')} @Emit('reset') resetCount(){ this.count=0 } //等价于returnValue(){this.$emit('return-value',10,e)} @Emit() returnValue(e){ return10 } //等价于promise(){...promise.then(value=>this.$emit('promise',value))} @Emit() promise(){ returnnewPromise(resolve=>{ resolve(20) }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。