为 vue-router meta 声明类型

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 给我以下错误：

Type 'unknown' cannot be used as an index type.

我对 Typescript 很陌生，所以这可能是我忽略的地方，但我不知道如何解决这个问题。

感谢任何帮助。

Answer 1

Docs

It is possible to type the meta field by extending the RouteMeta interface:

// 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 被声明为可选属性，您需要在使用前测试它的存在...

为 vue-router meta 声明类型

Declaring types for vue-router meta

typescript

vue-router

vuejs3

vue-router4