如何在TypeScript中将类静态成员类型Dropdown.Item用作数组元素类型？

错误原因 #

TypeScript 中类同时存在两个身份：值空间的构造函数，以及类型空间的类实例类型。你在类型注解中直接写 Dropdown 时，TS 会默认取它的实例类型，这个类型上不包含类的静态属性，所以会抛出「Dropdown 仅指代一个类型，却被当作命名空间使用」的错误。

方案1：直接添加typeof（无需修改原有组件代码） #

要取类的静态属性对应的类型，需要先通过 typeof 拿到类构造函数本身的类型，再取对应的属性：

// 写法1：直接取静态属性对应的组件类本身的类型
const items: Array<typeof Dropdown.Item> = [];

// 如果是要存储 Dropdown.Item 的 Props 数组，写法如下：
const items: Array<React.ComponentProps<typeof Dropdown.Item>> = [];

// 如果是要存储 Dropdown.Item 的组件实例数组，写法如下：
const items: Array<InstanceType<typeof Dropdown.Item>> = [];

方案2：定义同名命名空间（可直接使用Dropdown.Item语法） #

如果你希望在类型注解中也可以直接写 Dropdown.Item，不需要每次加 typeof，可以在组件定义的文件中，导出和类同名的命名空间：

export class Dropdown extends Component<IDropdownProperties, IDropdownState> {
  public static Item = DropdownItem;
}

// 新增同名命名空间，导出对应的类型
export namespace Dropdown {
  // 根据你的需要选择导出的类型：
  export type Item = typeof DropdownItem; // 组件类本身的类型
  // export type Item = React.ComponentProps<typeof DropdownItem>; // 组件Props类型
  // export type Item = InstanceType<typeof DropdownItem>; // 组件实例类型
}

定义完成后，你就可以在任意位置直接使用想要的语法：

const items: Array<Dropdown.Item> = [];

内容的提问来源于stack exchange，提问作者Mike Lischke