vue_cli项目配置TypeScript

近几年TypeScript在迅速发展，作为前端开发来说，不管是提升开发效率还是求职来说都是有必要的，我们公司目前用的vue-cli3，想在当前引入TypeScript，下面就是具体的引入步骤。参考

第一步：安装依赖

//安装vue的官方插件
npm i vue-class-component vue-property-decorator --save

// ts-loader typescript 必须安装，其他的相信你以后也会装上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

• vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件
• vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
• ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件
• tslint-loader跟tslint：我想你也会在.ts .tsx文件 约束代码格式（作用等同于eslint）
• tslint-config-standard：tslint 配置 standard风格的约束

vue-class-component vue-property-decorator的区别
vue-class-component是vue官方出的，vue-property-decorator是社区出的，vue-property-decorator深度依赖了vue-class-component拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是vue-class-component的一个超集，正常开发的时候只需要用vue-property-decorator中提供的操作符即可，不用再从vue-class-component引入vue和component。

第二步：修改vue.config.js

要注意两点：

• 在resolve.extensions 里面加上.ts 后缀 （是为了之后引入.ts的时候不写后缀）
• 在rules里添加对.ts文件的解析

module.exports = {
    lintOnSave: false,
    publicPath: './',
    devServer: {
        ...
    },
    configureWebpack: {
        resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
        module: {
            rules: [
                // 从这里复制下面的代码就可以了
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                },
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                    }
                }
            ]
        }
    }
}

ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析.ts文件（就跟.babelrc的作用一样）

第三步：添加 tsconfig.json

接下来在项目根路径下创建tsconfig.json文件，完整的配置请点击 tsconfig.json

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

第四步：让 ts 识别 .vue

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts。

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

意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。
而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件。

第五步：改造 .vue 文件

vue-property-decorator对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法之后更加扁平化。

<template></template>
  <div>
    <input v-model="msg">
    <p>msg: {{ msg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

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

  @Component
  export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 声明周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>

上面的代码跟下面的代码作用是一样的

export default {
  data() {
    return {
      msg: 123
    }
  },

  // 声明周期钩子
  mounted() {
    this.greet()
  },

  // 计算属性
  computed: {
    computedMsg() {
      return 'computed ' + this.msg
    }
  },

  // 方法
  methods: {
    greet() {
      alert('greeting: ' + this.msg)
    }
  }
}

接下来只要重启项目就可以了。
在Vue项目中引入TypeScript之后，会发现和原本的代码书写方式有了区别。vue-property-decorator提供了@Emit，@Inject，@Model，@Prop，@Provide，@Watch，@Component等装饰器来对Vue项目进行改造，对开发Vue+ts项目来说提供了便利，接下来就是基于vue-property-decorator，来对比Vue+ts项目和原本Vue项目的代码，传送门。