在 Typescript 中使用点符号进行多次导出答案

【问题标题】：Multiple exports with dot notation in Typescript在 Typescript 中使用点符号进行多次导出
【发布时间】：2018-08-13 05:42:49
【问题描述】：

我正在尝试完全一样，但使用 Typescript。

这一行（就在导出语句之前）：

Sidebar.Item = SidebarItem;

给出编译错误：Property 'Item' does not exist on type 'typeof Sidebar'

我尝试将 Item 添加到我的 Sidebar 类定义中，如下所示：

class Sidebar extends Component<SidebarProps, SidebarState> {
    Item: SidebarItem;
    ...
}

但这会导致这个错误：Public property 'Item' of exported class has or is using private name 'SidebarItem'.

我已尝试删除此行：

Sidebar.Item = SidebarItem;

我没有将 Item 添加到我的类定义中，而是像这样导出两个类：

export default Sidebar;
export { SidebarItem as Item };

哪个可以编译，我可以像这样导入所有内容：

import * as Sidebar from '...';

但是我必须像这样使用它们：

<Sidebar.default>
    <Sidebar.Item></Sidebar.Item>
    <Sidebar.Item></Sidebar.Item>
</Sidebar.default>

我真的很想摆脱Sidebar中的.default。

我在这里做错了什么？

【问题讨论】：

【解决方案1】：

这个模块是设计错误的。

这可能可以通过以下方式完成：

export class SidebarItem ...

export default class Sidebar extends Component<SidebarProps, SidebarState> {
    static Item = SidebarItem;
    ...
}

这两个组件应该保持这样的层次结构并没有充分的理由。

如果有多个等值的导出（哪些是组件），则通常使用 CamelCased 组件并使用单独的命名导出。命名导出更适合 IDE 中的自动导入：

export { Sidebar, SidebarItem };

Item 在需要时不能从默认导出中摇树。 Sidebar.Item 的缩小效率低于 SidebarItem。

【讨论】：

非常感谢您的详细解答！ there is no good reason why these two components should maintain a hierarchy like that 你这么说仅仅是因为类名吗？请注意，这些类名不是真实的（我只是使用了与链接问题中相同的类名）。我的实际情况非常不同，没有另一个组件将永远不会被使用（Item 将始终是Sidebar 的子级）。
不客气。无论如何，请记住，将组件类用作子类的命名空间是不习惯的（缩小是唯一想到的真正问题，但可能还有其他问题）。

【解决方案2】：

您的第一个解决方案几乎是正确的，但是您将 Item 声明为 Sidebar 类的对象的属性，而不是类本身的属性。您可以使用静态属性声明来完成后者。这应该有效：

export class SidebarItem ..
..
class Sidebar extends Component<SidebarProps, SidebarState> {
  static Item = SidebarItem;
..
export default Sidebar;

您将不再需要 Sidebar.Item = SidebarItem; 行，但您可能需要移动 SidebarItem 类，使其出现在 Sidebar 之前。导入将只是import Sidebar from '...'。

【讨论】：