TypeScript是js的超集，是由微软开发的。越来越多的项目使用TypeScript。像现在很火的Visual Studio Code就是使用TypeScript开发。

本人开发过一段Angular的项目，Angular就是基于TypeScript开发的，很喜欢这种，可以快速的从一个Java开发者无缝的切换到前端开发。

Vue也随应时代的大潮流，支持了TypeScript。在使用Vue CLI创建新项目的时候就可以直接选择TypeScript，就会创建一个基于TypeScript的基本的Vue项目。使用了一段时间感觉还可以，就着手把原来的项目升级为支持TypeScript。

1. 安装typescript

首先需要在项目中增加TypeScript语法支持：

npm install -D typescript

2. 安装Vue插件

Vue官方为我们提供了一个插件，用来聚合eslint和tslint

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript

3. 安装Vue TypeScript注解支持

在开发后端项目的时候，使用了大量的Spring注解，同样在开发Angular项目的时候，也使用Angular提供的装饰器。既然Vue集成了TypeScript，我们就需要使用官方提供的Vue TypeScript装饰器来替换原来的js方式来创建组件：

npm -S vue-class-component vue-property-decorator

4. 新建tsconfig.json

增加TypeScript编译参数配置：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": 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",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "examples/**/*.ts",  //-- examples相关配置为项目特殊配置，可以不需要
    "examples/**/*.tsx",
    "examples/**/*.vue"
  ],
  "exclude": ["node_modules"]
}

5. 将main.js转换为main.ts

main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import axios from 'axios';

import FinD from '@weus/fuc-design';
import '@weus/fuc-design/lib/theme-default/index.css';

import MerakUI from '../packages';

Vue.use(FinD);

Vue.use(MerakUI);

Vue.prototype.$http = axios;

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');
?

6. 添加vue声明文件

shims-vue.d.ts

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

shims-tsx.d.ts

import Vue, { VNode } from 'vue';

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

7. 修改项目入口配置

此配置是因为我的项目入口不是原来的src下面的，所以需要单独配置。

vue.config.js

  pages: {
    index: {
      entry: 'examples/main.ts',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },

8. 修改lint配置

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    // parser: 'babel-eslint'  // --
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};
?

原来项目中的配置为parser: 'babel-eslint' ，此时在TypeScript文件中声明一个实例为null 会校验提示错误。

9. 结束

到此为止，我们就可以很愉快的使用TypeScript方式去开发Vue项目了。如果使用了Vuex，还需要单独去配置Vuex的装饰器依赖。当然，不使用装饰器，我们也可以使用原来的方式使用Vue的一些特性。前端开发就是这么随性。