带有儿童道具的 Typescript React 编译器问题

Question

Typescript 编译器似乎无法将 JSX 子元素识别为 children 属性。我正在尝试使用 Typescript 进行 Wordpress Gutenberg 块开发，但运行遇到了这个奇怪的问题。

错误

TS2769: No overload matches this call. The last overload gave the following error. Argument of type '{ title: string; }' is not assignable to parameter of type 'Attributes & Props'. Property 'children' is missing in type '{ title: string; }' but required in type 'Props'.

错误发生在 <PanelBody title="Some Title"> 的 edit.tsx 文件上。无论出于何种原因，子元素都不满足 PanelBody 元素的 children 属性。我可以通过添加 children 作为道具来欺骗编译器，使其编译无误：

<PanelBody children={null} ...>
  <p>Child</p>
</PanelBody>

但是，VS Code 给了我一个错误，说 children 被定义了两次......这是正确的。但是编译器不理解这一点，在这里只看到一个 children 道具。这是什么原因？

edit.tsx

import { BlockEditProps } from "@wordpress/blocks";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, Panel } from "@wordpress/components";

import React from "react";
import { BlockAttributes } from "./metadata";

const TestBlock: React.FC<BlockEditProps<BlockAttributes>> = (props) => {
  return (
    <>
      <InspectorControls>
        <Panel>
          <PanelBody title="Some title">
            <p>Some child element</p>
          </PanelBody>
        </Panel>
      </InspectorControls>
      <div>
        <p>This is some content. Maybe it needs a child?</p>
      </div>
    </>
  );
};

export default TestBlock;

webpack.config.js

const path = require("path");
const defaultConfig = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaultConfig,
    entry: "./src/editor/index.ts",
    module: {
        ...defaultConfig.module,
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            ...defaultConfig.module.rules,
        ],
    },

    resolve: {
        ...defaultConfig.resolve,
        extensions: [".tsx", ".ts", ".js", ".jsx"],
    },

    output: {
        ...defaultConfig.output,
        filename: "index.js",
        path: path.resolve(__dirname, "dist/editor"),
    },
};

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "jsx": "react",
        "module": "ESNext",
        "target": "ES6",
        "allowJs": true
    },
    "exclude": [
        "node_modules"
    ],
    "include": ["src"]
}

package.json

{
  "devDependencies": {
    "@types/react": "^17.0.39",
    "@types/wordpress__block-editor": "^6.0.5",
    "@types/wordpress__blocks": "^9.1.1",
    "@types/wordpress__components": "^19.3.0",
    "parcel": "^2.0.1",
    "prettier": "^2.5.1",
    "ts-loader": "^9.2.7",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "@wordpress/block-editor": "^8.2.0",
    "@wordpress/blocks": "^11.2.2",
    "@wordpress/scripts": "^22.1.0"
  }
}

Answer 1

好吧，看来我遵循了一些关于如何将 Typescript 支持添加到 Gutenberg 块开发的错误或陈旧的建议。

它真的很简单，只要使用 @wordpress/scripts，无需任何配置。

我删除了我在 webpack 配置文件中所做的所有自定义内容，因为我可能覆盖并过度执行了一些规则。

webpack.config.js

const path = require("path");
const defaultConfig = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaultConfig,
    entry: "./src/editor/index.ts",
    output: {
        ...defaultConfig.output,
        filename: "index.js",
        path: path.resolve(__dirname, "dist/editor"),
    },
};

脚本包具有 typescript 内置支持，因此无需您自己手动添加该功能。

带有儿童道具的 Typescript React 编译器问题

Typescript React compiler issue with children props

typescript

reactjs

webpack

wordpress-gutenberg