Solid-js组件的Typescript类型

Question

如何将Solid-JS文档中的first example转换为有效的typescript？

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时，我会使用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)：

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

或者，如果您愿意：

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

顺便说一下:在你的问题中，你使用了Hello {props.name}，这很好，因为props是一个反应式对象，表达式props.name也是反应式……在你的回答中，你使用的是Hello {name}，它永远不会更新，因为name只是一个字符串，本质上是常量，因此是无反应的。