自定义JSX工厂函数时，如何配置TypeScript支持组件key属性？

要让所有自定义组件像React那样自动支持key属性，无需每个组件都显式声明该属性，可以通过全局扩展TypeScript的JSX类型来实现，具体方案如下：

方法一：全局扩展JSX.IntrinsicAttributes（推荐） #

创建一个全局类型声明文件（比如global.d.ts），在其中扩展JSX.IntrinsicAttributes接口——这个接口是TypeScript用来定义所有JSX元素默认属性的全局接口，扩展后所有JSX组件都会自动继承key属性。

// global.d.ts
declare namespace JSX {
  interface IntrinsicAttributes {
    key?: string | number | symbol;
  }
}

确保你的tsconfig.json中include字段包含这个声明文件，让TypeScript能识别到：

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "createDOMElement",
    // 其他编译配置...
  },
  "include": ["src/**/*", "global.d.ts"]
}

方法二：定义基础Props类型让组件继承 #

如果不想全局修改，也可以定义一个包含key属性的基础Props类型，让所有组件的Props接口都继承它：

// 定义基础Props类型
type BaseComponentProps = {
  key?: string | number | symbol;
};

// Button组件Props继承基础类型
type ButtonProps = BaseComponentProps & {
  text: string;
};

function Button(props: ButtonProps) {
  // 组件逻辑实现
  return createDOMElement('button', {}, props.text);
}

这种方式需要每个组件手动继承基础类型，适合需要更精细控制的场景，但全局扩展的方式更贴近React的使用体验，无需重复编写代码。

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