Vue项目加入TypeScript实战摸索笔记

一、升级第三方包

如果使用了ivew组件库，vue-router都要升级到3

其中iview2到3有不兼容更新：

二、安装依赖

"vuex-ts-decorators": "^0.0.7",（如果未使用vuex可不安装）

三、项目根目录添加ts配置文件： tsconfig.json

{   "compilerOptions": {      /* Basic Options */      "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */      "module": "ESNext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */      "allowJs": true,                       /* Allow javascript files to be compiled. */      "strict": true,                            /* Enable all strict type-checking options. */      "strictFunctionTypes": true,           /* Enable strict checking of function types. */      "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */      "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */      "emitDecoratorMetadata": true,      "lib": [         "es2017",         "dom",         "scripthost"      ],      "types": [         "webpack-env"      ],      "experimentalDecorators": true        /* Enables experimental support for ES7 decorators. */   },   "include": [      "src/**/*.ts",      "src/**/*.tsx",      "src/**/*.vue"   ],   "exclude": [      "node_modules"   ]}

四、修改webpack.base.config.js

五、src文件夹下添加 shim-vue.d.ts

declare module "*.vue" {  import Vue from "vue";  export default Vue;}declare module "ReportInteraction" {  import Vue from "vue";  export default Vue;}import { VueConstructor } from 'vue'import {ModalInstance, Message} from 'iview'import Axios from '@types/axios';declare module 'vue/types/vue' {  interface Vue {    $Modal: ModalInstance,    $Message: Message,    validate: Function,    $axios: Axios,      $util: Axios,    $ajax: Axios,    $bus: any  }  interface VueConstructor {    $Modal: ModalInstance,    $Message: Message,    validate: Function,    $axios: Axios,      $util: Axios,    $ajax: Axios,    $bus: any  }}

可以根据自己需要注册全局变量让ts识别，例如$bus,以及iview的$Message等,用不到的可以去掉

六、修改main.ts

如果引入了jquery、lodash，echarts等第三方插件，需要全局注册，好让ts识别

import $ from 'jquery';const _ = require('expose-loader?$!lodash');const E = require('expose-loader?$!echarts');// import iquery from 'jquery';declare global {  interface Window {    $: any;    _: any;    E: any;  }} window.$ = $;window._ = _;window.E = E;

其他的就根据ts语法来修改，添加变量或者方法、方法参数的数据类型

七、修改.vue文件

• 声明语言是ts：

export default class Example extends Vue { }