我開始學習打字稿和 SolidJS，我遇到了這個。
import { Component } from "solid-js"
const Button:Component=({onClick})=>{
return <button onClick={onClick}>Button</button>
}
export default Button
我創建的每個組件都充滿了錯誤亮點，但專案運行正常，甚至是傳入的函式onClick。
可能是 vscode 配置錯誤？我通常在 React 中編碼。
檔案擴展名為 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/*"]
}
}
}
存盤庫solidjs
uj5u.com熱心網友回復：
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;
由于您的組件只有一個 prop ，onClick并且它將 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中傳遞的功能也是如此。
Typescript 是一個輔助工具，組件只要編譯成 JavaScript 沒有任何錯誤就可以作業。
如果您不向 提供自己的 prop 型別Component，則 props 將是普通物件，因為它默認為P = {}.
你得到錯誤是因為你的 Button Component 期望{}作為它的 prop 但你正在傳遞{ onClick: (event: MouseEvent) => void }。
可能是 vscode 配置錯誤？我通常在 React 中編碼。
可能它與 vscode 無關，因為它內置了對 typescript 的支持，這意味著如果它安裝在你package.json的tsconfig.json.
Solid 組件的型別簽名與 React 的不同。在 React 中 Solid 只有功能組件，它不會將狀態傳遞給它的子組件，所以S = {}在 Solid中沒有Component型別。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/537496.html