Как аннотировать компонент SolidJS с помощью Typescript?
Я начал изучать машинописный текст вместе с 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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, и он принимает событие клика в качестве единственного параметра. Событие клика имеет тип 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 без ошибок.
Если вы не укажете свой собственный тип реквизита для Component, реквизит будет простым объектом, потому что по умолчанию он равен P = {}.
Вы получаете ошибку, потому что ваш компонент кнопки ожидает {} в качестве своей опоры, но вы передаете { onClick: (event: MouseEvent) => void }.
Вероятная неправильная конфигурация vscode? Я кодирую в React обычно.
Вероятно, это не имеет ничего общего с vscode, так как он имеет встроенную поддержку машинописного текста, а это означает, что вам не нужно какое-либо расширение для использования машинописного текста, если оно установлено в вашем package.json и имеет tsconfig.json.
Сигнатура типа компонента Solid отличается от сигнатуры React. С точки зрения React Solid имеет только функциональные компоненты и не передает состояние своим дочерним элементам, поэтому в типе S = {} Solid нет Component.