vue2配置使用typescript教程

本文是vue项目的js升级ts教程，也可以作为vue项目的ts使用教程。

项目背景：

• vue版本：2.6.11
• 基于vue-cli4脚手架生成
• 已配置eslint（配置教程参考：传送门）

一、安装依赖

vue ts基础：

npm i -D typescript @vue/cli-plugin-typescript

ts校验相关：

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

vue ts辅助：

npm i -D vue-class-component vue-property-decorator

二、添加文件

1、src目录添加两个ts声明文件，用于支持ts的类型声明：

shims-tsx.d.ts

import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface Element extends VNode {}
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }

  interface Window {
    __wxjs_environment: any;
    WebViewJavascriptBridge: any;
    _czc: any;
  }
}

shims-vue.d.ts

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

2、根目录添加tsconfig.json，用于项目的ts校验

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules",
    "dist",
    "public",
    "build"
  ]
}

三、使用方式

vue-property-decorator插件使用文档：传送门

1、script标签

要在.vue文件里使用ts，首先要在script标签上添加属性lang=“ts”
例如一个基础的App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {

}
</script>

<style lang="less">
</style>

• 导出的class类名等同js版导出的name属性

2、data数据

直接用等于号赋值

// ========== js版 ==========
data () {
 return {
	a: 1,
	b: false
 }
}

// ========== ts版 ==========
a = 1
b = false

3、computed计算属性

用get的形式

// ========== js版 ==========
computed: {
 aa () {
  return this.a
 }
}

// ========== ts版 ==========
get aa () {
 return this.a
}

4、生命周期钩子函数

保持不变，只是不同函数之间不需要用逗号分隔

5、methods方法

不再需要methods属性包裹，里面的方法直接提出来，和声明钩子函数平级（注意方法名别和钩子函数重名了），方法之间也不需要逗号分隔。

// ========== js版 ==========
created () {},

methods: {
  getData () {},
  setData () {}
}

// ========== ts版 ==========
created () {}

getData () {}
setData () {}

6、自定义组件components、自定义指令directives、过滤器filters

全都写在开头的@Component里

// ========== ts版 ==========
@Component({
  components: {},
  directives: {},
  filters: {}
})

7、props参数接收

通过@Prop定义

// ========== js版 ==========
props: {
  title: {
    type: String,
    default: ''
  },
  list: {
    type: Array,
    default () {
      return []
    }
}

// ========== ts版 ==========
@Prop({ default: '' }) readonly title!: string
@Prop({ default: () => [] }) readonly list!: any[]

8、watch监听

通过@Watch定义

// ========== js版 ==========
watch: {
  // 普通监听
  list (val, oldVal) {
  	console.log(val, oldVal)
  },
  // 深度监听
  res: {
  	handler () {
  	  console.log(val, oldVal)
  	},
  	deep: true,
  	immediate: false
  }
}

// ========== ts版 ==========
@Watch('list')
onWatchList (val, oldVal) { // 方法名没要求，但是要放在相应的@Watch下面，一一对应
  console.log(val, oldVal)
}

@Watch('res', { deep: true, immediate: false })
onHandleRes (val, oldVal) {
  console.log(val, oldVal)
}

9、computed的get set 版

通过@PropSync定义

// ========== js版 ==========
props: {
  // 父组件通过isShow.sync传递
  isShow: {
    type: boolean,
    default: false
  }
},

computed: {
  isShowModal: {
  	get () {
	  return this.isShow
	},
	set (val) {
	  this.$emit('isShow:update', val)
	}
  }
}

// ========== ts版 ==========
@PropSync('isShow', { default: false }) isShowModal!: boolean

10、mixins混入

直接上双混入：

• js版

// mixins1.js
export default {
  created () {
    console.log(1)
  }
}

// mixins2.js
export default {
  created () {
    console.log(2)
  }
}

// index.vue
<template>
  <div id="index"></div>
</template>

<script>
import mixins1 from './mixins1'
import mixins2 from './mixins2'

export default {
  mixins: [mixins1, mixins2]
}
</script>

• ts版

// mixins1.ts
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class mixins1 extends Vue {
  created () {
    console.log(1)
  }
}

// mixins2.ts
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class mixins2 extends Vue {
  created () {
    console.log(2)
  }
}

// index.vue
<template>
  <div id="index"></div>
</template>

<script lang="ts">
import { Component, Prop, Mixins } from 'vue-property-decorator'
import mixins1 from './mixins1'
import mixins2 from './mixins2'

@Component
export default class Index extends Mixins(mixins1, mixins2) {

}
</script>

11、vuex

推荐使用插件vuex-class 官方文档

npm i vuex-class -S

以带命名空间namespace的为例：

import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const userModule = namespace('user')

@Component
export default class Index extends Vue {
  @userModule.Getter isLogin!: boolean // 使用this.isLogin指代vuex的user模块里getters的同名isLogin
}

四、报错处理

1、引入第三方插件报无法找到模块

需要在shims-vue.d.ts文件里声明。

• 例如： import md5 from ‘js-md5’，
  报错信息：无法找到模块"js-md5"的声明文件
  解决方法：在shims-vue.d.ts里添加

declare module 'js-md5' {
  import md5 from 'js-md5'
  export default md5
}

2、this.$ 报错 does not exist on type

常见于给vue实例添加的自定义属性上，比如 $toast $http $loading

• 例如：this.$loading.show()
  报错信息：Property ‘loading’ does not exist on type ‘Index’.
  解决方法：shims-tsx.d.ts里添加以下声明（以 $loading为例）

declare module 'vue/types/vue' {
  interface Vue {
    $loading: { show: (text?: string) => void; hide: () => void }; // 具体类型以你自己的为准，或者直接用any
  }
}

3、引入路径带@时报错

报错信息：找不到模块…或其相应的类型声明。
可能的原因有很多，按照以下方法依次排查处理：

（1）配置tsconfig.json

• 检查项目根目录tsconfig.json文件的path属性是否正确配置了@的路径

"paths": {
  "@/*": ["src/*"]
},

• 如果@路径名是动态的，解决方法: shims-vue.d.ts里添加模块声明。
  例如 import api from ‘@/utils/api’ 报错，就按下面方式添加：

declare module '@/utils/api' {
  import api from '@/utils/api'
  export default api
}

（2）.ts文件路径不能带后缀名，.vue文件路径需要加上后缀名

ts里引入.ts文件时路径不要加后缀名，引入.vue文件时路径需要带上.vue后缀名

import apis from '@/utils/api'
import ruleModal from '@/components/rule.vue'

4、其他各种疑难杂症

那就试试vscode工作区的配置：

• 将项目文件夹拖进vscode里，以工作区的形式展示，然后将该项目拖到顶部，使其排在工作区的第一位，如图所示的dyd-h5项目，很多莫名其妙的问题都能通过这种方式解决：

五、结语

vue 2.x的版本需要引入第三方插件使用class类的形式才能较好的配合使用ts，写起来还是比较繁琐的，而已经发布了正式版的vue 3.0对ts的支持比较完全，而且可以使用function形式使用ts，类似于react的hooks，function形式更加简单方便，如果是新开的项目还是推荐直接上vue 3.0吧。

六、附录

1、.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  globals: {
    _czc: true
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'camelcase': 'off',
    'comma-dangle': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'lines-between-class-members': 'off',
    '@typescript-eslint/no-this-alias': [
      "error",
      {
        "allowDestructuring": true,
        "allowedNames": ["that", "self"]
      }
    ]
  },
}