如何创建继承NodeItem的可扩展TypeScript泛型类型MenuItem

要实现继承NodeItem<T>模式、同时支持扩展的MenuItem类型，你可以通过递归泛型继承的方式，让MenuItem既复用NodeItem的结构，又保留自身的扩展性。

1. 定义MenuItem类型 #

直接让MenuItem<T>继承NodeItem<T>，同时可以添加菜单栏特有的属性（比如图标、点击事件等）：

import type { NodeItem } from './HierarchicalBar.svelte';

// MenuItem继承NodeItem的所有属性，同时支持递归扩展
export type MenuItem<T extends MenuItem<T>> = NodeItem<T> & {
  // 这里添加Menu特有的属性，示例：
  icon?: string;
  action?: () => void;
};

2. 扩展自定义MenuItem属性 #

和NodeItem的使用模式一致，你可以轻松扩展MenuItem的额外属性：

// 自定义带快捷键的菜单项类型
type CustomMenuItem = MenuItem<CustomMenuItem> & {
  shortcut?: string;
};

// 使用示例
const menuData: CustomMenuItem[] = [
  {
    id: 1,
    text: '文件',
    icon: '📁',
    nodes: [
      { id: 11, text: '新建', action: () => console.log('新建文件'), shortcut: 'Ctrl+N' },
      { id: 12, text: '保存', action: () => console.log('保存文件'), shortcut: 'Ctrl+S' }
    ]
  }
];

3. 在MenuToolbar组件中使用 #

在MenuToolbar里沿用HierarchicalBar的泛型约束，确保传入的类型符合MenuItem<T>要求，同时可以直接传递给HierarchicalBar：

<script lang="ts" generics="TMenuItem extends MenuItem<TMenuItem>">
  import HierarchicalBar from './HierarchicalBar.svelte';
  // 菜单栏数据，类型约束为MenuItem的扩展类型
  export let items: TMenuItem[];
</script>

<!-- 直接将items传给HierarchicalBar的nodes属性，类型完全兼容 -->
<HierarchicalBar nodes={items}>
  <slot let:node={menuItem}>
    <!-- 这里可以访问menuItem的所有属性：id、text、nodes、icon、action、自定义的shortcut等 -->
    <span>{menuItem.icon}</span>
    <span>{menuItem.text}</span>
    {#if menuItem.shortcut}
      <span class="shortcut">{menuItem.shortcut}</span>
    {/if}
  </slot>
</HierarchicalBar>

类型兼容性说明 #

因为TMenuItem extends MenuItem<TMenuItem>，而MenuItem<T>本身继承了NodeItem<T>，所以TMenuItem自动满足HierarchicalBar要求的TNode extends NodeItem<TNode>约束，完全可以直接传递给HierarchicalBar的nodes属性，同时插槽内的变量会保留完整的类型提示。

内容的提问来源于stack exchange，提问作者José Ramírez