Solid-js component type definitions in Typescript

Question

Solid-js component type definitions in Typescript

Is there a way to convert the initial example provided in the Solid-JS documentation to valid TypeScript?

import { render } from "solid-js/web"

const HelloMessage = (props: { name: string }) => <div>Hello {props.name}</div>

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"))

I'm encountering an error related to props lacking type hint, specifically

Parameter 'props' implicitly has an 'any' type.

In React, I typically use React.FC, but I haven't been able to find an equivalent in Solid-JS. Is there another approach I should take?

typescript jsx solid-js

Answer 1

Answer №1

After looking into it further, I discovered that the solution involves using the Component in a generic way:

import {render} from 'solid-js/web'
import {Component} from 'solid-js'

const Greeting: Component<{name: string}> = (props) => <div>Hello {props.name}</div>

render(() => <Greeting name="Taylor" />, document.getElementById("hello-example"))

Answer 2

After looking into it further, I discovered that the solution involves using the Component in a generic way:

import {render} from 'solid-js/web'
import {Component} from 'solid-js'

const Greeting: Component<{name: string}> = (props) => <div>Hello {props.name}</div>

render(() => <Greeting name="Taylor" />, document.getElementById("hello-example"))

Answer 3

Answer №2

An alternative approach could be implemented (without the need to import type Component):

» Check out the Demo

import {render} from 'solid-js/web'

function HelloMessage(props: {
  name: string
}) {
  return (
    <div>
      Hello {props.name}
    </div>
  )
}

render(() => <HelloMessage name="Taylor" />, document.getElementById('app'))

Alternatively, you can consider this concise version:

const HelloMessage = (props: { name: string }) =>
  <div>Hello {props.name}</div>

By the way, in your question you are using Hello {props.name}, which is correct as props is a reactive object and props.name is also reactive. However, in your answer, you use Hello {name} instead, which will not update dynamically as name is just a constant string and non-reactive by default.

Answer 4

An alternative approach could be implemented (without the need to import type Component):

» Check out the Demo

import {render} from 'solid-js/web'

function HelloMessage(props: {
  name: string
}) {
  return (
    <div>
      Hello {props.name}
    </div>
  )
}

render(() => <HelloMessage name="Taylor" />, document.getElementById('app'))

Alternatively, you can consider this concise version:

const HelloMessage = (props: { name: string }) =>
  <div>Hello {props.name}</div>

By the way, in your question you are using Hello {props.name}, which is correct as props is a reactive object and props.name is also reactive. However, in your answer, you use Hello {name} instead, which will not update dynamically as name is just a constant string and non-reactive by default.

Solid-js component type definitions in Typescript

Answer №1

Answer №2

Similar questions

"Optimize Your Data with PrimeNG's Table Filtering Feature

What is the method to activate a chosen cell within an angular table?

The React state remains stagnant and does not receive any updates

Can Angular 4 experience race conditions?

Retrieve Laravel User from a Fetch Request

An issue has been identified in the node_modules/xterm/typings/xterm.d.ts file at line 10, causing an error with code TS1084. The 'reference' directive syntax used

Encountering the error "Unable to access the 'user' property of an undefined object when working with Angular and Firebase

TypeScript is encountering difficulties locating a local directory

Tips for implementing UI properties in React

Can a function be invoked using a variable as a parameter in JavaScript?

incorporating my unique typographic styles into the MUI framework

What is the reason behind tsc (Typescript Compiler) disregarding RxJS imports?

Showcasing JSON information within a dropdown menu

Using TypeScript with React's forwardRef

"What is the best way to apply multiple filters to an array in a React

A series of OR interfaces in TypeScript Interface

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

Tips for managing errors when utilizing pipe and mergemap in Angular

Error encountered when duplicating routes in Nest.js and Fastify

User authentication status is only unavailable within the component when redirection occurs