如何使用类型记录来连接SolidJS组件？

Question

我开始学习打字稿，以及SolidJS和我偶然发现的。

​

​

import { Component } from "solid-js"

const Button:Component=({onClick})=>{

    return <button onClick={onClick}>Button</button>
    
}

export default Button

我创建的每个组件都充满了错误突出显示，但项目正常工作，甚至onClick中传递的函数也是如此。

可能是vscode配置错误？我的代码反应正常。

文件扩展名为tsx：

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true,
    "paths": {
      "@": ["./src"],
      "@/*": ["./src/*"],
      "$lib":["./src/lib"],
      "$lib/*":["./src/lib/*"]
    }
  }
}

存储库固体

Answer 1

Component用于注释SolidJS组件。它是Props对象的泛型。

让我们看看它的定义：

/**
 * A general `Component` has no implicit `children` prop.  If desired, you can
 * specify one as in `Component<{name: String, children: JSX.Element>}`.
 */
export declare type Component<P = {}> = (props: P) => JSX.Element;

因为您的组件只有一个支柱，即onClick，所以它接受click事件作为它的唯一参数。Click事件具有MouseEvent类型：

import { Component } from "solid-js"

interface ButtonProps {
  onClick: (event: MouseEvent) => void
}

const Button: Component<ButtonProps> =({ onClick })=>{
  return (
    <button onClick={onClick}>Button</button>
  );
}

export default Button;

我创建的每个组件都充满了错误突出显示，但项目正常工作，甚至onClick中传递的函数也是如此。

类型记录是一个辅助工具，组件只要编译为JavaScript就可以工作，而不会出现任何错误。

如果您不向Component提供您自己的道具类型，则道具将是普通对象，因为它默认为P = {}。

您会得到错误，因为您的按钮组件希望{}作为它的支柱，但是您正在传递{ onClick: (event: MouseEvent) => void }。

可能是vscode配置错误？我的代码反应正常。

可能它与vscode无关，因为它内置了对类型记录的支持，这意味着如果在您的package.json中安装并具有tsconfig.json，则不需要任何扩展来使用类型记录。

固体组分的类型特征与function的类型特征不同，实质上实体只有功能成分，且不传递状态给子实体，因此在Solid的S = {}类型中不存在Component。