背景：

vue2+ElementUi

原因：

之所以要在vue2中引入ts，是为了规范项目，更是为了后面学习vue3+ts做准备。

移入ts修改思路：

先修改.vue文件-----------再修改全局工具类.js文件-----待续。。。

正式内容：

第一步安装引入：

npm install typescript ts-loader --save-dev

npm install vue-property-decorator --save-dev

进行配置：vue.config.js中，网上很多，可自行配置

新建ts配置文件：tsconfig.json,与vue.config.js同目录下

// 字段的含义可以参考官网
{
  "compilerOptions": {
   "target": "esnext",
   "module": "esnext",
   "strict": true,
   "importHelpers": true,
   "moduleResolution": "node",
   "experimentalDecorators": true,
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true,
   "sourceMap": true,
   "baseUrl": ".",
   "allowJs": true,
   "noEmit": true,
   "typeRoots": [
     "./src/types", // 自定义的types目录
     "./node_modules/@types" // 引入基础的types，一部分第三方库声明会安装在此目录，可以自行定义需要使用的
   ],
   "paths": {
    "@/*": [
     "src/*"
    ]
   },
   "lib": [
    "esnext",
    "dom",
    "dom.iterable",
    "scripthost"
   ]
  },
  "exclude": [
   "node_modules"
  ]
 }

 

第二步，新建全局声明文件.d.ts

// src/types/vue-shims.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue // 这里目的是为了让ts能识别.vue文件(我是这样理解的)
}

// src/types/lib.d.ts
import { UtilInterface } from '@/libs/types/util' // 工具函数接口

declare module 'vue/types/vue' {
  interface Vue {
    $util: UtilInterface, //这样声明，可在全局使用this.$util
    $baseUrl: string,
  }
}

 

新建好声明文件后，要让ts执行，那么就要修改配置文件：

// tsconfig.json
"typeRoots": [
     "./src/types", // 这里包含src/types下所有的.d.ts声明文件
     "./node_modules/@types"
   ],

展示一个已经改好的.vue文件

当你把你的工具类.js文件改为.ts后，你引入的第三方包可能会报错，那是因为.ts文件在检验的时候，它不认识你引入的包，没有声明这个包的类型，所以要下载对应的声明类型的包，比如：

npm i lowdb // 第三方包
npm i @types/lowdb --save-dev // 声明文件

https://www.typescriptlang.org/dt/search?search=

上面这个链接中可以搜索一下第三方包。

如果没有第三方包，那么自己就新建一个.d.ts文件进行声明。

待续。。。。。。。。。