shims-tsx.d.ts文件在Vue-Typescript项目中做什么?

使用TypeScript创建Vue项目时,包含两个声明文件:shims-vue.d.tsshims.tsx.d.ts

//shims-vue.d.ts

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

和:

//shims-tsx.d.ts

import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

在创建一个小项目(没有Vue CLI)时,我忘记包含第二个项目(shims.tsx.d.ts),并且我的项目可以编译并按预期运行(没有错误)。

我发现了与此相关的帖子:https : //github.com/vuejs/vue-cli/issues/1198,但希望对此进行更多说明。

我很好奇这个文件的作用以及为什么包含它?换句话说,如果我不包括此声明文件,我将不得不“破坏”我的应用程序。

谢谢!

Davaid神奇Eva2020/03/14 18:26:20

第一个文件可帮助您的IDE理解以什么结尾的文件.vue

第二个文件允许您使用.tsx文件,同时jsx在IDE中启用语法支持以编写JSX样式的 TypeScript代码。