vue2.x使用typescript开发记录__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

前言

早在去年vue官方已经支持了脚手架生成TypeScript项目了，加上即将到来的vue3是用TS编写的。故开始尝试现有项目的重构此文为vue2.x + TypeScript记录文,我会将踩过的坑一一记录。

对 TS 还未了解的可以参考这位前辈的文章，文章写的非常详细

点这里-Typescript 教程

1.刚上手就遇到一个大坑

如何在 TS 中使用全局变量

具体用法和 js 版本的一样

官方推荐使用全局变量专用模块

// 新建一个ts文件 // config.ts export default { install: (Vue: any, options: any) => { Vue.prototype.api = { testApi: 'xxxxxxxxx', } } } // 在main.ts中引入 import config from './config' Vue.use(config)

```
个人喜欢使用的方式
```

// 新建一个ts文件 // config.ts interface ApiType { [apiName: string]: any } const api: ApiType = { testApi: 'xxxxxxxxx' } export default api // 在main.ts中引入 import config from './config' Vue.prototype.config = config

两种方式都是将全局变量挂载到原型链，区别不大

本以为可以直接在 vue文件中通过this的方式调用,结果发现报错了

<script lang='ts'> import { Component, Vue } from 'vue-property-decorator' @Component export default class App extends Vue { private created() { console.log(this.config.testApi) // Error:Property 'config' does not exist on type 'App' } } </script>

在网上找了一圈找到解决方案新建一个.d.ts的文件名字随意添加以下代码

//vue-prototype.d.ts declare module 'vue/types/vue' { interface Vue { config: any } }

结果毫无作用，自信满满的重新编译，一看结果还是报错，百度google一番后被告知重启编辑器解决，在重启编辑器后依然如此，心态已崩。在盯着这个 interface Vue 半天后突然想到，这个Vue是从哪里来的？是不是需要引入？试了一下果然如此，编辑器正常了。吐血三升，吐槽一下某些文章写的一点都不严谨，代码缺少关键部分导致很多人踩坑，正常是这个样子

//vue-prototype.d.ts import Vue from 'vue' declare module 'vue/types/vue' { interface Vue { config: any } }

本文使用 mdnice 排版