Vue2.x项目添加TypeScript支持

为什么要添加TypeScript

1）TypeScript对JS的改进主要是静态类型检查，在项目开发维护过程中起到非常重要的提示和约束,能更好的降低开发维护成本。
2）在编译阶段就能发现类型不匹配，这样无论是重构代码还是bug排查的过程中都能够更快的解决bug。 如图，编译阶段检测到类型不匹配后提示：

Vue2.x怎么引入TypeScript

这里主要针对vue组件怎么快速引入TypeScript进行类型检测，关于TypeScript相关配置教程很多，可以网上查找，这里不赘述
1）script增加lang="ts"，可以将script里面的代码识别为TypeScript 而非JavaScript。<script lang="ts"></script>
2）使用Vue.extend定义组件，让TypeScript正确推断 Vue 组件选项中的类型。export default Vue.extend({})
3)标注data

interface IData { 
  iconClass?: string 
  colorArr?: string[] 
  seriesData: ISeriesData[] 
}

4)标注返回值和参数

dataProcess(data: IRequestData[]): ISeriesData[] { 
  let dataArr = [] 
  for (let i = 0, len = data.length; i < len; i++) { 
    dataArr.push({ value: data[i].num, name: data[i].type }) 
  } 
  return dataArr 
}

添加TypeScript支持

如下示例是echart饼图的vue组件改造demo，添加了TypeScript支持：

<template>
  <demo-panel title="农场种植果树情况" class="demo-panel">
    <doughnut-chart
      style="height: 300px"
      :color="colorArr"
      :iconClass="iconClass"
      :seriesData="seriesData"
    ></doughnut-chart>
  </demo-panel>
</template>

<script lang="ts">
import Vue from 'vue'
import DoughnutChart from './components/doughnutChart.vue'
import { getTreesData } from './api/demo'

interface IRequestData {
  num: string
  type: string
}

interface ISeriesData {
  value: string
  name: string
}

interface IData {
  iconClass?: string
  colorArr?: string[]
  seriesData: ISeriesData[]
}

export default Vue.extend({
  name: 'demo',
  data(): IData {
    return {
      iconClass: 'icon-demo',
      colorArr: ['#0029f5', '#33751f', '#fef051', '#eb3a24', '#f7cfd0', '#f4b03e', '#872889'],
      seriesData: []
    }
  },
  methods: {
    async fetchData() {
      const params = {
        // add params
      }

      try {
        const res = await getTreesData(params)
        this.seriesData = this.dataProcess(res)
      } finally {
        // do sth
      }
    },

    /**
     * @des 数据处理
     * @param {Object} data 接口数据
     */
    dataProcess(data: IRequestData[]): ISeriesData[] {
      let dataArr = []

      for (let i = 0, len = data.length; i < len; i++) {
        dataArr.push({
          value: data[i].num,
          name: data[i].type
        })
      }

      return dataArr
    }
  },
  mounted() {
    this.fetchData()
  },
  components: { DoughnutChart }
})
</script>

<style lang="scss" scoped>
.demo-panel {
  
}
</style>