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

This link 是我能找到的唯一体面的解释。基本上它与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 文件？

因为 Typescript 仍然不开心。它对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"，那么Foo 的类型将是Vue。似乎没有办法实际上导入Foo 类型。

编辑：实际上我认为它可以工作*如果您将组件导入另一个.vue 文件。如果你从.ts 导入它，那么你只会得到Vue 的别名。这在测试中很烦人！我发了another question about this。

Answer 2

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

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