在 Vue 3 和 Typescript 中使用 globalProperties

Question

我在 main.ts 中添加了一个全局的属性，我正试图在一个组件中访问它。但是我收到错误：

Property '$const' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.Vetur(2339)

我想我需要增加类型，typescript 现在认为 $const 是任何类型，但是我不知道如何在 Vue 3 中执行此操作，文档中也没有提及。

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import * as constants from "@constants";

const app = createApp(App);

app.config.globalProperties.$const = Object.freeze(constants);

app.use(store);

app.mount("#app");

组件

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Header",

  computed: {
    tags() {
      return Object.entries(this.$const.TAGS);
    }
  }
});
</script>

如有任何帮助，我们将不胜感激。

Answer 1

您可以在应用程序中扩充 @vue/runtime-core TypeScript 模块：

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $const: Record<string, unknown>;
  }
}

export {}  // Important! See note.

这是一个文档：ComponentCustomProperties

重要说明： TS 模块扩充正常工作仅当放在 module.[=22= 中时]

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

因此该文件必须包含至少一个 top-level import 或 export 语句，即使是空语句（如上例所示）- Type Augmentation Placement

在 Vue 3 和 Typescript 中使用 globalProperties

Using globalProperties in Vue 3 and Typescript

typescript

vetur

vuejs3