声明 vue-router 元的类型

Question

在我的router.ts 中，我添加了一些具有“getter”的元属性，然后我有兴趣在加载该组件时使用。

{
    path: "attachments",
    name: "AdminJobsAttachments",
    meta: {
        navbarName: "Attachments",
        getter: "Jobs/getJob", // <- this
    },
    component: () =>
        import("@/views/common/Attachments.vue"),
},

当组件加载时，我会像这样检索该信息：

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
    setup() {
        const route = useRoute();
        const store = useStore();
        const getter = computed(() => route.meta.getter);
        const routeParam = ref(route.params.id);
        const model = computed(() =>
            store.getters[getter.value](routeParam.value)
        );

        return {}
    }
})

但是，Typescript 给了我以下错误：

类型“未知”不能用作索引类型。

我对 Typescript 很陌生，所以这可能是我忽略了的东西，但我无法弄清楚如何解决这个问题。

感谢任何帮助。

Answer 1

Docs

可以通过扩展RouteMeta接口来键入元字段：

// typings.d.ts or router.ts
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    // must be declared by every route
    navbarName: string
    // is optional - does not have to be on every route
    getter?: string
  }
}

请注意，由于getter 被声明为可选属性，您需要在使用它之前测试它的存在...