Intellij Idea 为什么函数返回JSXSolidJS中的元素不能赋值给变量类型Component？

6psbrbz9 于 2023-04-29 发布在其他

关注(0)|答案(1)|浏览(116)

我的IDE（IntelliJ IDEA）标记我的应用程序组件as not assignable to variable type Component，但它没有：（
我想问题可能出在我的配置上（我只是使用了官方网站上的信息，我不太擅长这个）。
但我注意到以下几点：

如果我导入JSX，那么error disappears（出现ofc“no-unused-vars”错误）。
如果我忽略这些错误，应用程序builds和runs without any errors。
在ryansolid's repository with webpack + ts example我的IDE shows the exact same error中

UDP

我想指出的是，index.tsx和App.tsx中的代码可以在default Vite templates中工作，我很确定这段代码不是问题所在。

UDP 2

snnsnn指出了render方法中的一个愚蠢的错误（Index.tsx已更改），但Argument type () => JSX.Element is not assignable to parameter type () => JSX.Element出现了一个更奇怪的新问题
App.tsx

import { Component, createSignal } from "solid-js";

const App: Component = () => {
  const [count, setCount] = createSignal<number>(0);
  return (
    <>
      <h1>Hello Stack Overflow {count()} times</h1>
      <button
        onClick={() => {
          setCount(count() + 1);
        }}
      >
        Say hello again
      </button>
    </>
  );
};

export default App;

index.tsx

import { render } from "solid-js/web";
import App from "./App";

render(() => <App />, document.querySelector("#root"));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:solid/typescript"
  ],
  "overrides": [
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "solid"
  ],
  "ignorePatterns": [
    "webpack.config.js"
  ],
  "rules": {
  }
}

.babelrc

{
  "presets": [
    "solid",
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

package.json

{
  "name": "solid-webpack-test",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "solid-js": "^1.7.3"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/eslint-parser": "^7.21.3",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-typescript": "^7.21.4",
    "@typescript-eslint/eslint-plugin": "^5.59.1",
    "@typescript-eslint/parser": "^5.59.1",
    "babel-loader": "^9.1.2",
    "babel-preset-solid": "^1.7.3",
    "eslint": "^8.39.0",
    "eslint-plugin-solid": "~0.12.1",
    "html-webpack-plugin": "^5.5.1",
    "prettier": "^2.8.8",
    "typescript": "^5.0.4",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules"]
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
  entry: "./src/index.tsx",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    devMiddleware: {
      publicPath: "/",
    },
    port: 3000,
  },
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(ts)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

module.exports = config;

intellij-idea

来源：https://stackoverflow.com/questions/76112671/why-function-returns-jsx-element-is-not-assignable-to-variable-type-component-in

1条答案

按热度按时间

bvn4nwqk1#

render函数希望您传递JSX元素，而不是组件，因此您需要删除:Component类型并让typesript派生该类型，或者将其替换为App: () => JSXElement。

import { render } from 'solid-js/web';
import { JSXElement } from 'solid-js';

const App: () => JSXElement = () => {
  return <div>Hello World</div>;
};

render(() => <App />, document.querySelector('root')!);

另一种形式也可以：

render(App, document.querySelector('root')!);

https://www.solidjs.com/docs/latest#render
此外，组件类型与返回JSX元素不同，因为后者不接受任何参数。Component与() => JSXElement不同。

赞(0）回复(0）举报 2023-04-29

我来回答

Intellij Idea 为什么函数返回JSXSolidJS中的元素不能赋值给变量类型Component？

UDP

UDP 2

1条答案

相关问题

热门标签

最新问答