typescript - 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 .