在多個html元素中包含JSX屬性

Question

我有一些我想添加到其他元素的JSX屬性。

例attribtes我需要包括：

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; } 
    } 
} 

有沒有辦法實現這個不需要重複的代碼？

Answer 1

找到了解決方案，使用|運算符可以合併兩個接口。

通過這種方式，您可以爲所有基本屬性（例如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; } 
    } 
}