Typescript 在多个html元素中包含JSX属性

我想将一些JSX属性添加到多个其他元素中

我需要包括的属性示例：

class?: string;
id?: string;
style?: string;

示例元素：

namespace JSX {
    interface IntrinsicElements {
        element1: { att1: string; }
        element2: { att2: string; }
        element3: { att3: string; }
    }
}

它应该是什么样子的：

namespace JSX {
    interface IntrinsicElements {
        element1: { att1: string; class?: string; id?: string; style?: string; }
        element2: { att2: string; class?: string; id?: string; style?: string; }
        element3: { att3: string; class?: string; id?: string; style?: string; }
    }
}

---

有没有一种方法可以在不需要重复代码的情况下实现这一点？

找到了一种解决方案，使用

|

操作符可以合并两个接口

通过这种方式，您可以为所有基本属性（例如class、id、style）定义一个接口，并将其与特定属性接口（例如{att1:string；}）合并

下面是我的解决方案代码：

namespace JSX {
    interface BaseAttributes {
        class?: string;
        id?: string;
        style?: string;
    }
    interface IntrinsicElements {
        element1: BaseAttributes | { att1: string; }
        element2: BaseAttributes | { att2: string; }
        element3: BaseAttributes | { att3: string; }
    }
}