Vue2 Vue-cli中如何使用Typescript

这篇文章主要介绍Vue2 Vue-cli中如何使用Typescript，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一、初步配置

首先安装官方插件vue-class-component，vue-property-decorator，配置webpack。
webpack配置如下：

修改入口文件

entry: {  app: './src/main.ts' }

resolve部分：

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

配置loader

{  test: /\.tsx?$/,  loader: 'ts-loader',  exclude: /node_modules/,  options: {   appendTsSuffixTo: [/\.vue$/],  }  }

配置tsconfig.json

{  "include": [  "src/**/*"  ],  "exclude": [  "node_modules"  ],  "compilerOptions": {  "allowSyntheticDefaultImports": true,  "experimentalDecorators": true,  "allowJs": true,  "module": "es2015",  "target": "es5",  "moduleResolution": "node",  "experimentalDecorators": true,  "isolatedModules": true,  "lib": [   "dom",   "es5",   "es2015.promise"  ],  "sourceMap": true,  "pretty": true  } }

二、实战！

配好配置只是第一步，在项目里跑起来才是王道。

在vue文件的script标签里添加lang='ts'

因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西，你跑起来后会报模块无法解析的错误，所以还需要配置.d.ts声明文件

vue的如下配置

declare module "*.vue" {  import Vue from 'vue';  export default Vue; }

你也可以为其它的非js模块配置.d.ts文件如html（告诉ts-loader把html理解成字符串）

declare module "*.html" {  let template: string;  export default template; }

配置好之后ts就能理解这些模块了

从vue-property-decorator引入需要用到的模块

（一般只用到Component, Vue, Watch, Prop这四个，其它3个没用到也没研究，知道的大佬可以解释下。）

import { Component, Vue, Watch } from 'vue-property-decorator'

这里拿之前写的sidbar的代码当个栗子：

class HoverTopElem {  leaveTop: number = -200  top: number = null  height: number = null  show(e) {  this.top = e.target.getBoundingClientRect().top  this.height = e.target.clientHeight  }  hidden() {  this.top = this.leaveTop  } } @Component({  name: 'sidebar',  template: template,  components: {  sidebarItem  } }) export default class Sidebar extends Vue {  SidebarMenu: any = SidebarMenu  hoverTopElem: HoverTopElem = new HoverTopElem()  activeListItemName: string = null  activeRouteItemRoute: string = null  get _activeRouteItemRoute(): string {  return this.$route.path  }  @Watch('_activeRouteItemRoute', { immediate: true })  onRouteChanged(val: any) {  this.activeRouteItemRoute = val  }  changeList(param) {  this.activeListItemName = param  }  changeRoute(param) {  this.activeRouteItemRoute = param  } }

元数据写在@Component配置里，像名字，用到的组件啥的，然后说下之前vue里用到的各个实例属性方法在这里怎么用：

data: 这个是最常用的，像上面的SidebarMenu（这里一共声明了4个），注意这里声明的变量一定要赋一个值，没有就null,不能是undefined，不然这个数据就不是响应的。因此HoverTopElem类里的属性也是要有初始值，不然这些属性也不是响应的

computed: 这里就是get函数，注意tsconfig.jsonp不配置"target": "es5"这里会报错

prop: vue-property-decorator里面有Prop模块，也可以在元数据声明这个prop，然后在类里声明一下这个变量就可以了，个人推荐第一种

watch: vue-property-decorator里的Watch模块

methods: 方法像data一样直接写在类里就可以了（注意不要和周期钩子同名）

各种生命周期钩子: 直接写就行

路由钩子见vue-class-component文档

至此，基本就可以像原来一样写vue组件了。

当然如果要想和原来一样写ts,还需要配置tslint,不然一些ts语法不会被识别，像public修饰符之类的，因为ts还不是很熟练就没想着配，有兴趣的朋友可以试试。

以上是“Vue2 Vue-cli中如何使用Typescript”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！