Типы машинописи для компонентов Solid-js

Question

Как преобразовать первый пример из документации Solid-JS в действительный машинописный текст?

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

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

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

я получаю сообщение об ошибке propsбез подсказки типа, в частности Parameter 'props' implicitly has an 'any' type.

С реакцией я бы использовал React.FC, но я не могу найти эквивалент с Solid-JS.

Answer 1

Я нашел решение, использует Componentуниверсальный:

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

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

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

Answer 2

Альтернативой может быть следующее (без импорта типа Component):

» Демо

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

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

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

Или, если вы предпочитаете:

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

Кстати: в вашем вопросе вы используете Hello {props.name}что хорошо, как propsявляется реактивным объектом, а выражение props.nameтакже реактивен ... в своем ответе вы используете Hello {name}вместо этого, который никогда не будет обновляться, как nameэто просто строка, которая по своей природе постоянна и, следовательно, не является реактивной.