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

Question

使用打字稿创建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

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

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

import Foo from "./Foo.vue";

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

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

但是它可以通过“加载程序”（可怕的名称）进行扩展，可以添加它来处理特定的文件格式。例如，您可以将其配置为使用 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. 我猜 Typescript.d.ts在同一目录或类似目录中查找所有内容。

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

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

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

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

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

Answer 2

第一个文件可以帮助你的IDE来了解什么是文件结尾.vueIS

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