ts命名空间-全局使用interface

在项目中通过 declare namespace 来声明命名空间

我在这里创建了一个global.d.ts文件，在该文件中声明了Menu命名空间，这样就可以在全局使用Menu类型了，无需import引入

当然，你可以在项目中任何地方新建global.d.ts(文件名自定义)并声明命名空间，即使放到views文件夹也可以，当然，为了项目规范化，最好放到指定目录

/* ts命名空间namespace */
/* 路由-Menu */
declare namespace Menu {
  interface MenuOptions {
    path: string;
    name: string;
    redirect?: string;
    component?: string | (() => Promise<unknown>);
    meta: MetaType;
    children?: MenuOptions[];
  }
  interface MetaType {
    title: string;
    isHide: boolean;
    isKeepAlive: boolean;
    isAffix: boolean;
    isLink?: string;
    isIframe?: boolean;
    roles: array<string>;
    icon?: string;
    svgIcon?: string;
  }
}

在页面中使用

<script setup lang="ts">
import IconCommon from "@/layout/components/Menu/icon-common.vue";
defineOptions({ name: "MenuItem" });

interface Props {
  routeTree: Menu.MenuOptions[]; // 直接使用Menu命名空间
}

const props = withDefaults(defineProps<Props>(), {
  routeTree: () => []
});
</script>

---

参考文章：https://juejin.cn/post/7055154224954343432