jsx - Typescript-typer for Solid-js-komponenter

Hvordan konverterer jeg det første eksemplet fra Solid-JS-dokumentasjonen til å være gyldig TypeScript?

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

const HelloMessage = props => <div>Hello {props.name}</div>

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

Jeg får en feil om at props ikke har typenhint, spesifikt Parameter 'props' har implisitt typen 'any'.

Med React ville jeg brukt React.FC, men jeg kan ikke finne ekvivalenten med Solid-JS.

Svar #1

Jeg fant løsningen, det er å bruke Component-generisk:

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

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

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

Svar #2

Et alternativ kan være følgende (uten å måtte importere typen Component):

» 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'))

Eller hvis du foretrekker:

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

Forresten: I spørsmålet ditt bruker du Hello {props.name}, noe som er greit siden props er et reaktivt objekt og uttrykket props.name også er reaktivt ... i svaret ditt bruker du derimot Hello {name}, som aldri vil oppdatere, siden name bare er en streng som i sin natur er konstant og derfor ikke-reaktiv.

Relaterte artikler