javascript type javascript typescript vue_ide

源宝导读：ERP平台的前端底层使用了Vue作为组件的基础架构，而使用了TypeScript语言进行组件的封装与开发。本文将简要介绍平台在使用TypeScript和Vue框架进行老功能重构时的经验总结。

一、背景

下面主要探讨是以下三个方面：

  • 目前项目中使用到的vue+ts的哪些特性，还有哪些特性值得去使用，不会涉及到太多的ts语法知识；
  • 老项目的迁移为ts，有哪些点需要改造；
  • 各抒己见，探讨下各位都有哪些心得和见解。

二、为什么要用typescript

TypeScript简单介绍：

  • 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。
  • TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

总结优势：

  • 静态类型检查： 类型校验，能够避免许多低级代码错误；
  • IDE 智能提示： 使用一个方法时，能清楚知道方法定义的参数和类型和返回值类型；使用一个对象时，只需要.就可以知道有哪些属性以及属性的类型；
  • 代码重构： 经过不停的需求迭代，代码重构避免不了，在重构时，如果前期有清晰和规范的接口定义、类定义等，对于重构帮助很大；
  • 规范性和可读性： 类似于强类型语言，有了合理的类型定义、接口定义等，对于代码实现的规范性和可读性都有很大提高，不然搜索整个项目这个方法在哪里调用、怎么定义等。

个人认为最有价值点：写代码前，会先构思功能需求的整体代码架构。

三、安装和起步

一般我们会面临两个情况：

  • 新项目创建；
  • 觉得ts不错，想将老项目切换为vue+ts。

3.1、新项目起步

  • 安装vue-cli3.0；
  • vue create vue-ts-hello-world；
  • 选择Manually select features，勾选typescript。其他配置根据项目情况勾选。

3.2、老项目切换为vue+ts

  • 安装ts依赖（或使用yarn）；
  • yarn add vue-class-component vue-property-decorator；
  • yarn add ts-loader typescript tslint tslint-loader tslint-config-standard —dev。
  • 配置 webpack，添加ts-loader和tslint-loader；
  • 添加 tsconfig.json；
// 这是平台目前用的tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strictNullChecks": false,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      // 别名追加
      "components/*": [
        "src/components/*"
      ],
    },
    "lib": [ // 编译过程中需要引入的库文件的列表
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "ui-tests"
  ]
}

备注： ts 也可支持 es6 / es7，在 tsconfig.json中，添加对es6 / es7的支持。

"lib": [
  "dom",
  "es5",
  "es6",
  "es7",
  "es2015.promise"
]
  • 添加 tslint.json 或者 prettierrc（可以视情况而定）。
// 目前平台使用的是.prettierrc.js
module.exports = {
  "$schema": "http://json.schemastore.org/prettierrc",
  "singleQuote": true,
  "endOfLine": "auto",
  "semi": false
}
  • 让 ts 识别 .vue。
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
  • 而在代码中导入 .vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 .ts 文件，不识别 *.vue 文件。
  • 添加vue-shim.d.ts，让vue文件给vue模块来编译。
  • 改造 .vue文件，将vue中script切换为<script lang="ts">；
  • 改造.js文件，修改为ts语法，定义类型等。

四、vue+ts常用的装饰器

    这里主要用到了vue-property-decorator，这个是在vue-class-component基础上做了一层增强，新增了一些装饰器，使用更加便捷。这里只分享一些常用的，对于老项目改写vue文件很有用：

4.1、@Component

    标识该vue文件是一个组件，并且可以引入其他组件。

非ts版本：

import MyComponent from '@/components/MyComponent'
export default {
    components: {
        MyComponent
    }
}

ts版本：

import { Vue, Component } from 'vue-property-decorator'
import MyComponent from '@/components/MyComponent'
@Component({
    components: {
        MyComponent
    }
})
export default class YourComponent extends Vue {
}

备注：这里不管有没有引入其他组件，都必须要使用@Component，目的是为了注册这个组件。否则在其他组件各种莫名其妙的问题。比如：路由找不到组件，而且不会报错。

4.2、@Prop

非ts版本：

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    },
    propD: {
        type: Object,
        default: () => {},
        validator(val: object) {
          return val.prop = '1'
        }
    }
  }
}

ts版本：

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


@Component
export default class YourComponent extends Vue {
  @Prop(Number)
  readonly propA: number | undefined


  @Prop({ default: 'default value' })
  readonly propB!: string


  @Prop([String, Boolean])
  readonly propC: string | boolean | undefined


  // 也可以一起
  @Prop({type: Object, default: () => {},
    validator(val: object) {
      return val.prop = '1'
    }
  })
  readonly propD!: object // 只是举例，一般会定义一个interface
}

4.3、@Watch

非ts版本：

export default {
  watch: {
    child: {
        handler: 'onChildChanged',
        immediate: false,
        deep: false
    },
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false
      }
    ]
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {}
  }
}

ts版本：

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


@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}


  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}


  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

4.4、@Provide和@Inject

    场景：一般用于父级嵌套比较深的子孙vue组件，但是数据不是很方便传到深层级vue组件中，利用树型结构组件。

非ts版本：

// 父组件
provide () {
  return {
    OptionGroup: this
  }
}


// 子孙组件
inject: ['OptionGroup']

ts版本:

父组件：

@Provide()
  getObj () {
    return this
  }

子孙组件：

@Inject() getObj!: any


get obj() {
    return this.getObj()
}

Privide的弊端：

  • 依赖注入它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难；
  • 同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。

建议：

一般不推荐过度使用。

  • provide 和 inject的绑定并不是可响应的，这是刻意为之的。但是，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的；
  • 如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像Vuex这样真正的状态管理方案了。

4.5、@Ref

非ts版本：

export default {
  computed() {
    anotherComponent () {
        return this.$refs.anotherComponent
    },
    button () {
        return this.$refs.aButton
    }
  }
}

ts版本：

import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/Components/another-component.vue'


@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement


  // 我们目前是这样使用的
  $refs!: {
    popover: any
    search: HcProjectSelectSearch
    tree: HcProjectTree
  }
}

4.6、@Emit

用的很少，参数和时机不是很好控制。

非ts版本：

export default {
  methods: {
    handleClick(e) {
      this.$emit('click', e)
    },
    loadData() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })
      promise.then(value => {
        this.$emit('load', value)
      })
    }
  }
}

ts版本：

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


@Component
export default class YourComponent extends Vue {
  @Emit('click')
  handleClick(e) {
    // todo
  }
  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

五、mixin改写

定义mixin：

export const cusMixin = {
  mounted() {
    this.$refs = {}
    // $0 instanceof HTMLElement
    // this.$refs = {}
    console.log('mixin mounted')
  },


  beforeUpdate() {
    this.$refs = {}
    // console.log('global mounted')
  },
  updated() {
    this.$refs = {}
    // console.log('global mounted')
  }
}

引入mixin：

import { Vue, Component } from 'vue-property-decorator'
import cusMixin from '@/mixin'


@Component({
  components: {},
  mixins: [cusMixin]
})
export default class YourComponent extends Vue {}


// 或者尝试使用
import { Component, Mixins, Vue } from 'vue-property-decorator';
import { MyOtherMixin } from './MyOtherMixin';


@Component
export class MyMixin extends Vue {
   private created() {
    console.log('what?');
  }
}


@Component
// 继承多个mixin，使用数组 [MyMixin, MyOtherMixin] 
export default class App extends Mixins(MyMixin) { 
  private test = "test";
  private laowang = 'laowang';


  created() {
    console.log(this.test)
    console.log(this.Kitchen)
    console.log(this.Tv)
  }


}

六、vue识别全局的方法和变量

  • vue-shim.d.ts文件中，增加如下代码：
import Vue from 'vue'
import VueRouter, { Route } from 'vue-router'
import { Store } from 'vuex'
// 声明全局方法
declare module 'vue/types/vue' {
  interface Vue {
    // 内部变量
    $router: VueRouter;
    $route: Route;
    $store: Store<any>;
    // element-ui等组件
    $Message: any
    $Modal: any
    // 自定义挂载到Vue.prototype上的变量
    $api: any
    $mock: any
    $configs: any
  }
}

七、vuex的改写

    关于store的改造，配置和结构和原来一样，具体编码设计没有特定套路，根据项目具体设计改写为ts的语法。

    主要是关于ts在vue如何使用，目前主流的方案是vue-class-component + vuex-class，一般常用的mapGetters和mapActions改写：

yarn add vuex-class

非ts版本：

import { mapGetters, mapActions } from 'vuex'
export default Vue.extend({
  computed: {
     ...mapGetters({
       'name',
       'age'
     })
  },
  methods: {
    ...mapActions([
        'setNameAction'
    ])
  }
})

ts版本：

import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import { Test } from '@/store'


export default class YourComponent extends Vue {
  @Getter('name') name: string
  @Getter('age') age: number
  @Action('setNameAction') setNameAction: Function


  get innerName (): string {
     return this.name
  }
  get innerAge (): number {
     return this.age
  }


  setName (name: string) {
    this.setNameAction(products)
  }
}

备注：tsconfig.json需要调整下：

{
  "compilerOptions": {
    // 启用 vue-class-component 及 vuex-class 需要开启此选项
    "experimentalDecorators": true,


    // 启用 vuex-class 需要开启此选项
    "strictFunctionTypes": false
  }
}

八、vue render jsx语法改写

    改写的原理还是和上面类似，都是借助目前流行的两个库，除了使用vue-property-decorator以外，还需要借助vue-tsx-support，vue-tsx-support是在Vue外面包装了一层，将prop、event等以泛型的方式加了一层ts接口定义传了进去，目的是为了防止ts的类检查报错。

  • 步骤：
  • 引入 yarn add vue-tsx-support --dev；
  • 导入ts声明，在main,ts中import "vue-tsx-support/enable-check";
  • 在vue.config.js中extensions添加.tsx。
  • 使用：
import { Component, Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";


interface YourComponentsProps {
  name?: string
  age?: number
}


@Component
export default class YourComponents extends tsx.Component<YourComponentsProps> {
  @Prop() public name!: string;
  @Prop() public age!: number;


  protected render() {
    return (
      <div>
        <h1>姓名:{this.name}</h1>
        <h1>年龄:{this.age}</h1>
      </div>
    );
  }
}

    这里jsx改写为tsx大致简单了解下，如果大家有兴趣，以后可以一起学习探讨下。

九、思考

  • 关于老项目ts的改造，如何才能平滑过渡，不影响现有的功能。
  • 在vue中ts的实践，数据、视图、控制器分层设计的问题。

------ END ------

作者简介

罗同学： 研发工程师，目前负责ERP建模平台的设计与开发工作。