自定义JSX组件时TS提示id属性未定义，如何让所有组件支持id？

场景复现 #

tsconfig.json配置 #

{
    "compilerOptions": {
        "lib": ["es2015", "dom"],
        "jsx": "react",
        "jsxFactory": "createDOMElement"
    },
    "include": ["./src/**/*"]
}

Main.tsx代码 #

function createDOMElement(tagName: string | Function, props: any, ...children: any[]) {
    if (typeof tagName === 'function') {
        return tagName(props);
    }
    console.log(tagName, props, children);
    return tagName
}

function Button(data: { text: string }) {
    const button = (
        <button>Click me!</button>
    );
    console.log(button);
    return 'OK - from button'
}

export function Main() {
    const el = (
        <Button id="pippo" text="the text" />
    );

    console.log(el)

    return 'OK - from Main'
}

运行结果与错误信息 #

运行时控制台日志符合预期：

button null ['Click me!']
Main.tsx:14 button
Main.tsx:23 OK - from button

但VSCode抛出TypeScript错误：

Type '{ id: string; text: string; }' is not assignable to type '{ text: string; }'.
  Property 'id' does not exist on type '{ text: string; }'.ts(2322)

错误原因 #

TypeScript对JSX组件的props校验逻辑是基于组件自身定义的参数类型，而非jsxFactory（即createDOMElement）的参数类型。Button组件的props被明确定义为{ text: string }，但在JSX中传入了未声明的id属性，超出了类型定义范围，因此触发类型不匹配错误。

修复方案 #

方案1：定义基础Props接口，让组件统一继承 #

创建包含id属性的基础接口，所有组件的props类型都继承该接口，实现统一支持：

// 定义基础Props，将id设为可选，避免强制所有组件必须传id
interface BaseProps {
  id?: string;
}

// Button组件的props类型合并BaseProps
function Button(data: { text: string } & BaseProps) {
    const button = (
        <button>Click me!</button>
    );
    console.log(button);
    return 'OK - from button'
}

方案2：全局扩展JSX类型，自动支持id属性 #

如果希望项目中所有自定义组件都默认支持id，无需逐个声明，可以创建全局类型定义文件（如src/global.d.ts），扩展TypeScript的JSX内置类型：

declare namespace JSX {
  // 给所有HTML元素和自定义组件添加可选id属性
  interface IntrinsicAttributes {
    id?: string;
  }
}

添加后，所有JSX元素（包括自定义组件）都可以直接使用id属性。

方案3：交叉类型快速扩展（适合个别组件） #

如果只是个别组件需要临时支持id，可以直接用交叉类型扩展：

function Button(data: { text: string } & { id?: string }) {
    // 原有代码逻辑不变
}

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