vue2.x使用typescript开发记录__Vue.js
发布于 1 个月前 作者 banyungong 111 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

前言

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

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

点这里-Typescript 教程
1.刚上手就遇到一个大坑

如何在 TS 中使用全局变量

具体用法和 js 版本的一样

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

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

  1. 个人喜欢使用的方式
    

// 新建一个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 排版

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: YiHe109674 原文链接:https://juejin.im/post/6855129005754941454

回到顶部