Vue-cli3项目引入Typescript的实现方法

2023-08-10 18:38:04 293

前言

假设已经有一个通过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识别此段代码为typescript

importVuefrom'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)
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Vue-cli3项目引入Typescript的实现方法

热门推荐

随机推荐