使用TypeScript命名空间简化导入

一个常见的Button组件

export type ButtonProps = { ... };
 
export function Button(props: ButtonProps) { ... }

使用组件的时候如果需要使用到 ButtonProps 类型，则需要下面这样导入

import { Button, type ButtonProps } from "./button";
 
export type BetterButtonProps = ButtonProps & { ... };
 
export function BetterButton(props: BetterButtonProps) { ... }

除了需要导入 Button 之外，还需要导入 ButtonProps，且存在可能的命名冲突，使用 TypeScript 命名空间，则可以将其组合成单个导入值

export namespace Button {
  export type Variant = "solid" | "ghost" | "outline";
  export type Size = "xs" |  "sm" | "md" | "lg" | "xl";
  export type Props = {
    variant: Variant;
    size: Size;
  }
}
 
export function Button(props: Button.Props) { ... }

使用时：

import { Button } from "./button";
 
export namespace BetterButton {
  export type Props = Button.Props & { ... };
}
 
export function BetterButton(props: BetterButton.Props) { ... }

来源：How to Simplify Component Imports with TypeScript Namespaces by sergiodxa