This content originally appeared on DEV Community and was authored by Bao Huynh Lam
If you have worked with Typescript in a JavaScript framework - React, Vue, Solid, or Svelte - then you might have needed/will need to create wrapper/mirror components that encompasses native HTML elements.
For example: An enhanced <Link> wrapper over the <a> element. Or a custom <Button> component that behaves like a <button> - and be able accept all relevant attributes like type, style, aria-, etc. - but also allow passing in your own custom variant prop.
In such case, you would want to Typescript your component's props to extend the list of attributes that the underlying HTML component accepts.
Fortunately, all frameworks offer type helpers to achieve this.
React
React provides multiple helpers, including ComponentProps, or the more specific ComponentPropsWithoutRef if you don't want to accept a ref prop. They both requires one type parameter which is a string corresponding to an HTML element.
interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
specialProp?: string;
}
export function Button(props: ButtonProps) {
const {specialProp, ...rest} = props;
return <button {...rest}>{Button Text}</button>
}
Solid
Solid provides similar a helper with its JSX.ComponentProps type
import { JSX, splitProps } from "solidjs"
interface ButtonProps extends JSX.ComponentProps<'button'> {
specialProp?: string;
}
export function Button(props: ButtonProps) {
const [local, others] = splitProps(props, ['specialProp']);
return <button {...others}>{Button Text}</button>
}
Svelte
Svelte takes a bit different approach where you can import the direct interface from "svelte/elements" without using a type parameter
<!-- ButtonComponent.svelte -->
<script lang="ts">
import { HTMLButtonAttributes } from 'svelte/elements'
interface ButtonProps extends HTMLButtonAttributes {
specialProp?: string;
}
const {specialProps, ...rest} = $props()
</script>
<button {...rest}>Button Text</button>
Vue
Vue has automatic "fallthrough" attribute, so any prop that you don't explicitly define will automatically get passed through the root element in the template. No Typescript involved!
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyComponent',
props: {
customProp: String, // Just need to define the custom prop
},
});
</script>
<template>
<!--
Attributes not matching the `props` object above
will automatically fall to our button
-->
<button>Button Text</button>
</template>
This content originally appeared on DEV Community and was authored by Bao Huynh Lam
Bao Huynh Lam | Sciencx (2025-01-02T00:28:46+00:00) Typescript and HTML attributes in various frameworks. Retrieved from https://www.scien.cx/2025/01/02/typescript-and-html-attributes-in-various-frameworks/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.