shims-tsx.d.ts 文件在 Vue-Typescript 项目中有什么作用？

Question

使用typescript创建 Vue 项目时，包含两个声明文件： shims-vue.d.ts和shims.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 ，但希望得到更多说明。

我只是好奇这个文件的作用以及为什么包含它？ 换句话说，如果我不包含此声明文件，我将必须做什么才能“破坏”我的应用程序。

谢谢！

Answer 1

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

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

Answer 2

这个链接是我能找到的唯一体面的解释。 基本上它与Webpack有关。

如果你没有使用 Webpack - 你只使用 Typescript，那么做这样的事情是一个错误：

import Foo from "./Foo.vue";

因为显然 Typescript 不理解.vue文件 - 它们实际上不是 Typescript 模块。

但是，如果您设置了一个 Vue 项目，您会发现它一直都在这样做。 这是如何运作的？ 网络包！ 据我所知（我试图通过学习有关 webpack 的任何东西来避免精神错乱），这基本上是 Webpack 的工作 - 它遍历您的 Javascript/Typescript 中的所有import文件，并“捆绑”它们，即它将它们合并为一个文件。

但是它可以通过“加载程序”（可怕的名称）进行扩展，可以添加它来处理特定的文件格式。 例如，您可以将其配置为使用 CSS 加载器。 这意味着当它找到

import "./foo.css"

它会将 CSS 捆绑到输出中，并且可能会添加一些 Javascript 以在运行时将其插入到 DOM 中，或者诸如此类的一些废话。

无论如何，还有（我假设）一个用于处理捆绑这些文件的*.vue文件的加载器。 所以这就是为什么import Foo from "./Foo.vue"起作用的原因。 为什么我们需要 shim 文件？

因为打字稿仍然不高兴。 它对 Webpack 一无所知，因此当您尝试导入Foo.vue时它仍然会抛出错误（它会告诉您Can't find module "./Foo.vue" ）。

解决方案是shims-vue.d.ts 。 文件名似乎并不重要，只要以.d.ts结尾.d.ts 。 我猜 Typescript 在同一目录或类似目录中查找所有.d.ts 。

无论如何，内容是这样的：

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

这基本上意味着，“每次你导入一个名为*.vue的模块（支持通配符），然后实际上不要这样做 - 而是将其视为具有这些内容”。

这对我来说似乎是这样的：如果你确实import Foo from "./Foo.vue"那么Foo的类型将由Vue 。 似乎没有办法实际导入Foo类型。

编辑：实际上我认为它有效*如果你在另一个.vue文件中导入组件。 如果您从.ts导入它，那么您只会获得Vue的别名。 这在测试中很烦人！ 我对此提出了另一个问题。