vue2.x老项目typescript改造过程经验总结开发者社区

vue2.x老项目typescript改造过程经验总结

原创

extends: [
  'plugin:vue/recommended',
  'eslint:recommended',
  '@vue/typescript/recommended',
  '@vue/prettier',
  '@vue/prettier/@typescript-eslint'
parserOptions: {
  ecmaVersion: 2020,
},

import Vue, { VNode } from 'vue';
declare global {
  interface Window { // 全局变量
    i18n: any;
    eCharts: any;
declare module 'vue/types/vue' {
  interface Vue {
    $bus: Vue;
    $route: any;
    $router: any;
    CancelToken: any;
    $message: any;
    $confirm: any;
declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements { [elem: string]: any; }
}

Declaration Type	Namespace	Type	Value
Namespace	X		X
Class		X	X
Enum		X	X
Interface		X
Type Alias			X
Function			X
Variable			X

<template>
    <sidebar/>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Mutation, State } from 'vuex-class';
import sidebar from 'layout/sidebar';
@Component({
  components: {
    sidebar,
export default class App extends Vue {
  private loading = true
  @State(state => state.user.theme)
  private readonly theme
  @Mutation('user/setThemeModel')
  private setThemeModel
  @Action('user/getUserInfo')
  private getUserInfo
  @Watch('$route.params.id')
  private handler() {
    // TODO
  private get testCount() {
    // TODO
  private mounted(): void {
</script>

import { Component, Mixins, Vue } from 'vue-property-decorator';
// mixin
@Component
export default class PageLeave extends Vue {
  // TODO
// 组件
@Component({
  components: {
    TitleBar,
export default class CardPanel extends Mixins(PageLeave，OtherMixin) {
  //TODO
}

import Vue, { VueConstructor, CreateElement, VNode } from 'vue';
interface InputInstance extends Vue {
  composing: boolean;
export default (Vue as VueConstructor<InputInstance>).extend({
  name: 'demo-input',
  props: {},
  data() {},
  // TODO 更Vue其它组件一样
  render(h: CreateElement): VNode {
    // TODO 逻辑
    const classes = []
    const wrapperAttrs = {...this.$attrs};
    const wrapperEvents = {...this.$listeners};
    // JSX 语法
    return (
      <div class={classes} {...{ attrs: wrapperAttrs, on: wrapperEvents }}>
        <input/>
}

// Count.mixin.ts
import Vue from 'vue'
import { mapGetters } from 'vuex'
export default Vue.mixin({
  computed: {
    ...mapGetters(['count'])
  methods: {}
// Count.vue
export default Vue.extend<{}, Methods, Computed, {}>({
  mixins: [CountMixin],
  methods: {}
})

import CountMixin, { Computed as CountComputed } from './Count.mixin'
import LoadingMixin, { Computed as LoadingComputed } from './Loading.mixin'
type Computed = CountComputed & LoadingComputed
interface Methods {
  incrementCount: Function
  decrementCount: Function
export default Vue.extend<{}, Methods, Computed, {}>({
  mixins: [CountMixin, LoadingMixin],
  methods: {}
})

interface CountBindings extends Vue {
  count: number
export default (Vue as VueConstructor<CountBindings>).extend({
  mixins: [CountMixin],

vue2.x老项目typescript改造过程经验总结

vue2.x老项目typescript改造过程经验总结

前言：

项目配置注意事项：

WebPack配置修改

TypeScript配置文件

eslint解析规则增加TS配置项

TypeScript的声明文件

TS一些注意事项

TS类型

any

可选属性vs null undefined

null 和 undefined 是区别的

interface/class/abstract class/type

Vue升级方案对比

传统方案：vue-property-decorator

typescript mixin

mixins合并规律：

mixins混合权重

vue-property-decorator方案缺点

tsx组合方案：Vue Components + TypeScript

多个mixin混合

推荐实现