Typescript 实体js组件的类型脚本类型

如何将Solid JS文档中的转换为有效的typescript

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

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

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

从“solid js/web”导入{render}
const hellomemessage=props=>Hello{props.name}
render（（）=>，document.getElementById（“hello示例”））

我得到一个关于

props

没有类型提示的错误，特别是

参数'props'隐式地有一个'any'类型。

---

对于react，我会使用

react.FC

，但我找不到与Solid JS相同的解决方案。

我找到了解决方案，使用的是

组件

通用：

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

从'solid js/web'导入{render}
从“solid js”导入{Component}
const hellomemessage:Component=（{name}）=>Hello{name}
render（（）=>，document.getElementById（“hello示例”））

替代方案可以是以下内容（无需导入类型

组件）

：

从'solid js/web'导入{render}
功能HelloMessage（道具：{
名称：string
}) {
返回(
你好{props.name}
)
}
render（（）=>，document.getElementById（'app'））

或者，如果您愿意：

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

const HelloMessage=（道具：{name:string}）=>
你好{props.name}

顺便说一句：在你的问题中，你使用的是

Hello{props.name}

，这很好，因为

props

是一个被动对象，表达式

props.name

也是被动的。。。在您的回答中，您使用的是

Hello{name}

，它将永远不会更新，因为

name

只是一个字符串，它本质上是常量，因此没有反应性

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