Solid-js 组件的 Typescript 类型

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，我会使用React.FC，但我找不到 Solid-JS 的等效项。

Answer 1

我找到了解决方案，使用Component通用：

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"))

Answer 2

另一种选择可能如下（无需导入 type Component）：

\n

\xc2\xbb 演示

\n

import {render} from \'solid-js/web\'\n\nfunction HelloMessage(props: {\n  name: string\n}) {\n  return (\n    <div>\n      Hello {props.name}\n    </div>\n  )\n}\n\nrender(() => <HelloMessage name="Taylor" />, document.getElementById(\'app\'))\n

\n

或者如果您愿意：

\n

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

\n

顺便说一句：在你的问题中，你使用的Hello {props.name}是props反应式对象，表达式props.name也是反应式的......在你的答案中，你使用的是Hello {name}它，它永远不会更新，因为name它只是一个本质上恒定的字符串，因此无反应。

\n