Utilize JSX attributes across various HTML elements

Question

Utilize JSX attributes across various HTML elements

I'm looking for a solution to efficiently add JSX attributes to multiple elements.

Here are the example attributes I want to include:

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

And here are the example elements:

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

This is how I want them to behave:

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

Any suggestions on achieving this without repeating code?

typescript jsx

Answer 1

Answer №1

Discovered a solution by utilizing the | operator to merge two interfaces seamlessly.

This approach involves creating an interface for all fundamental attributes (such as class, id, style) and combining it with specific attribute interfaces (e.g. { att1: string; } ).

Below is the code snippet showcasing my solution:

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

Answer 2

Discovered a solution by utilizing the | operator to merge two interfaces seamlessly.

This approach involves creating an interface for all fundamental attributes (such as class, id, style) and combining it with specific attribute interfaces (e.g. { att1: string; } ).

Below is the code snippet showcasing my solution:

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

Utilize JSX attributes across various HTML elements

Answer №1

Similar questions

"Hmm, the React context's state doesn't seem to be changing

Arranging a dictionary by its keys using Ramda

Is it possible to utilize a function within an Angular [routerLink] to define the query parameter?

How can I fully mock a component in an Angular Unit Test, rather than just a single class?

The initial rendering of components is not displayed by Vue Storybook

How to Use TypeScript to Disable Href in Angular

What is the best way to incorporate a loop into a React return statement?

I am having trouble figuring out the issue with the state and how to properly implement it in Typescript

Moment-Timezone defaults to the locale settings after the global Moment locale has been established

Load Order Possibly Disrupted by Arrival of Barrel Imports

Validating mixed types and generics within an array using Typescript's type checking

Intellisense missing in VSCode for Angular and typings

Executing a service prior to the loading of Angular 7 applications or components

Having trouble getting the express router to function properly in your Node.js TypeScript project?

Utilizing type maps within nested objects in Typescript: A comprehensive guide

Issue with page break functionality during print preview

What is the best way to optimize a search for objects with extensive field arrays?

What happens when the loading state does not update while using an async function in an onClick event?

What is the recommended TypeScript type to be returned from a GraphQL resolver when using ESLint?

Best approach for managing Union Types in Angular 16 Templates / Utilizing Type Inference?