Solid-js 组件的 Typescript 类型

Question

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

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 只是一个本质上是常量的字符串，因此 none-reactive.

Solid-js 组件的 Typescript 类型

Typescript types for Solid-js components

jsx

typescript

solid-js