shims-vue.d.ts文件的作用

前言

使用vue+TS做开发的小伙伴肯定发现了有shims-vue.d.ts这个文件。但是这个文件他的作用是什么呢？

代码

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

反正我一打开长这个鬼样子，我不知道你们什么情况就是了。

作用

举两个例子看看，你们就能快速理解他的作用

例子1

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

注意看最下面我加了一行，这样子我就可以在ts，vue文件中使用import from这个es6语法了，如果你不相信，你就不加，自己去看看。百度了个半天基本都是使用require来解决，大部分后面还要加个default，我就问你受不受得了？

例子2

interface Element extends VNode {
  disabled?: boolean;
}

再加一行给你们看看。
首先我要吐槽一句，这个dom操作获得的element居然没有disabled属性，但是使用console.log(element)得到的信息到控制台一看，里面有，这我就真的是无了个大语。

正因为出现了这个问题，你没有行啊，老子给你加，如上代码所示。这样子今后在使用element.disabled时候就不会报错了。可能能有的小伙伴还会说我这么写行不行？

element?.disabled

你去试试就知道了，反正我得出结论就是?.这个语法在ts里面就当他死了吧。有人提出!.，这个倒是可以，但是tslint会报警告，你不嫌弃可以用。

总结

还需要总结吗？这个两个例子已经充分说明了shims-vue.d.ts文件的作用。行吧，有兄弟不看前面，错过几个亿不管了。
我总结一下：这东西就是让你的interface或其他一些在项目中的vue文件（使用ts的）和ts文件能够全局使用你declare的东西。