Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Question

Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Is there a way to enhance the props of an existing JSX element in SolidJS and craft a custom interface similar to the ButtonProps interface shown in this React example below?

import Solid from 'solid-js';

interface ButtonProps extends Solid.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon: boolean;
}

const Button: Solid.FC<ButtonProps> = ({ title, showIcon, ...props }) => {
  return (
    <button {...props}>
      {title}
      {showIcon && <Icon/>}
    </button>
  );
};

typescript solid-js

Answer 1

Answer №1

This has been my go-to approach:

import type { Component, JSX } from "solid-js";
import { splitProps } from "solid-js";

export type ButtonProps = {
  title: string;
  showIcon: boolean;
} & JSX.HTMLAttributes<HTMLButtonElement>;

const Button: Component<ButtonProps> = (props) => {
  const [, rest] = splitProps(props, ["title", "showIcon"]);
  return (
    <button {...rest}>
      {props.title}
      {props.showIcon && <Icon/>}
    </button>
  );
}

In the example above, I utilized a type intersection, but an alternative method could involve extending the interface.

Within this code snippet, I've made use of the Component type, which currently includes an optional children prop in the props. However, this is slated to change with the upcoming 1.4 release.

Furthermore, I've incorporated the splitProps function to prevent destructuring and maintain reactive updates to the prop values.

Answer 2

This has been my go-to approach:

import type { Component, JSX } from "solid-js";
import { splitProps } from "solid-js";

export type ButtonProps = {
  title: string;
  showIcon: boolean;
} & JSX.HTMLAttributes<HTMLButtonElement>;

const Button: Component<ButtonProps> = (props) => {
  const [, rest] = splitProps(props, ["title", "showIcon"]);
  return (
    <button {...rest}>
      {props.title}
      {props.showIcon && <Icon/>}
    </button>
  );
}

In the example above, I utilized a type intersection, but an alternative method could involve extending the interface.

Within this code snippet, I've made use of the Component type, which currently includes an optional children prop in the props. However, this is slated to change with the upcoming 1.4 release.

Furthermore, I've incorporated the splitProps function to prevent destructuring and maintain reactive updates to the prop values.

Answer 3

Answer №2

Similarly, the method to achieve this is quite comparable, with the exception of refraining from destructuring for reactive properties and using splitProps instead. For instance, your code snippet would now look like:

import { splitProps, JSX } from 'solid-js';

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon?: boolean; 
}

const Button = (props: ButtonProps) => {
  const [local, buttonProps] = splitProps(props, ['title', 'showIcon']);
  return (
    <button {...buttonProps}>
      {local.title}
      {local.showIcon && <Icon/>}
    </button>
  );
};

It's worth noting that the attributes' types for intrinsic elements are within the realm of JSX in solid, courtesy of jsx-dom-expressions responsible for converting JSX into reactive expressions.

Answer 4

Similarly, the method to achieve this is quite comparable, with the exception of refraining from destructuring for reactive properties and using splitProps instead. For instance, your code snippet would now look like:

import { splitProps, JSX } from 'solid-js';

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon?: boolean; 
}

const Button = (props: ButtonProps) => {
  const [local, buttonProps] = splitProps(props, ['title', 'showIcon']);
  return (
    <button {...buttonProps}>
      {local.title}
      {local.showIcon && <Icon/>}
    </button>
  );
};

It's worth noting that the attributes' types for intrinsic elements are within the realm of JSX in solid, courtesy of jsx-dom-expressions responsible for converting JSX into reactive expressions.

Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Answer №1

Answer №2

Similar questions

Error: Typings: Invalid syntax - Unexpected symbol =>

Error: Unable to locate bundle.js when attempting to refresh the page with a specific ID in the URL

leveraging the import statement in conjunction with SystemJs

One important rule to remember when using React Hooks is that they must be called consistently and in the correct order in each render of the component. It

Exploration of mapping in Angular using the HttpClient's post

What is the best way to call a method from app.component in another component?

Utilizing Google Sheets as a secure, read-only database for Angular applications without the need to make the sheet accessible to the

Personalized path-finding tree iterator

Utilizing variables to set the templateUrl in Angular2

The issue of resolving NestJs ParseEnumPipe

I'm curious about the significance of this in Angular. Can you clarify what type of data this is referring

What could be the reason behind TypeScript ignoring a variable's data type?

Transform Loopback 4 filter into a SQL WHERE condition

Display a loading indicator with the shortest possible delay whenever utilizing the React Router v6 Link functionality

Struggling with setting up eslint in my typescript project

What could be causing this TypeScript class to not perform as anticipated?

What is my strategy for testing a middleware that accepts arguments?

What's the trick to aligning the label on the material-ui text field to the right side?

In TypeScript, leveraging the spread operator to determine the largest value in an array containing nullable numbers

What sets apart Resumability, Hydration, and Reconciliation in today's web applications?