TypeScript继承HTMLDivElement时如何排除children属性？

你确实错误使用了Exclude工具类型——Exclude是用来处理联合类型的（比如从'a'|'b'中排除'a'），而你要操作的是接口/对象类型，应该用Omit工具类型来移除指定属性。另外，直接继承HTMLDivElement并不合适，因为它是DOM元素的类型，不是React组件props的类型，React提供了专门的HTMLAttributes<HTMLDivElement>来包含所有标准的div元素props（比如className、style、事件回调等）。

正确的Props定义 #

import { ReactNode, HTMLAttributes } from 'react';

export interface SplitPaneProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
  direction: 'vertical' | 'horizontal'; // 垂直/水平布局方向
  children: [ReactNode, ReactNode]; // 强制要求两个子元素
}

关键说明 #

1. Omit的作用：Omit<HTMLAttributes<HTMLDivElement>, 'children'>会移除HTMLAttributes中的children属性，让你可以重新定义符合需求的children类型。
2. 使用HTMLAttributes而非HTMLDivElement：HTMLAttributes<HTMLDivElement>是React封装的div组件props集合，包含所有你需要的标准属性，且它的children类型是ReactNode，和你自定义的子元素类型完全兼容，不会出现之前的HTMLCollection类型冲突问题。

组件使用示例 #

const SplitPane = ({ direction, children, ...restProps }: SplitPaneProps) => {
  const [panelA, panelB] = children;
  
  return (
    <div
      {...restProps}
      style={{
        display: 'flex',
        flexDirection: direction === 'vertical' ? 'column' : 'row',
        width: '100%',
        height: '100%',
        ...restProps.style
      }}
    >
      {panelA}
      {panelB}
    </div>
  );
};

这样你的组件既可以接收所有div的标准属性，又能强制限制必须传入两个子元素，完全解决了之前的TypeScript错误。

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams