如何修复TS2741错误：类型{}缺少必填属性children

错误现象 #

遇到TypeScript类型检查错误：

TS2741: 类型“{}”中缺少属性“children”，但类型“StringChildren”中需要该属性。

组件定义 #

Comment组件及相关类型定义如下：

export function Comment({children}: StringChildren)
export type FlatString = string | Iterable<string>
export interface StringChildren { children: FlatString }

自动修复后的代码 #

点击IDE「添加缺失属性」按钮后，代码被更新为以下内容，错误随即消失：

<Comment children={''}>
    Hello &lt; secret comment
    Multi-line {'-->'}
</Comment>

这说明TypeScript未将JSX标签内部的内容识别为等价的children属性，目前无法定位问题原因。

tsconfig.json配置 #

当前使用的TypeScript配置如下：

{
    // Visit https://aka.ms/tsconfig to read more about this file
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "declaration": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "exactOptionalPropertyTypes": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "lib": [
            "ESNext",
            "dom"
        ],
        "jsx": "react-jsx",
        "jsxImportSource": ".",
        "outDir": "./dist"
    },
    "files": [
        "./src/example.tsx",
        "./src/render.ts"
    ],
    "include": [
        "./src/jsx.d.ts"
    ]
}

注意：未使用React框架。

TS Playground中的类似问题 #

虽无法在TS Playground完全复现本地错误，但存在类似报错：

此JSX标签的“children”属性需要类型“string | string[]”，该类型需要多个子元素，但仅提供了一个子元素。(2745)

存在疑问：string | string[]类型为何要求多个子元素？即便仅使用string类型也会出现相同错误，按逻辑string类型只需要单个子元素即可。

编译输出观察 #

查看编译后的代码，发现<Comment>hello</Comment>确实会生成带有字符串值children属性的调用：

const test = _jsx(Comment, { children: "hello" });

既然编译阶段能正确处理JSX内容为children属性，为何类型检查阶段会报错？

TypeScript版本差异 #

将TS版本切换至4.9.5时，报错信息与本地遇到的完全一致：

TS2741: 类型“{}”中缺少属性“children”，但类型“StringChildren”中需要该属性。(2741)

内容的提问来源于stack exchange，提问作者mpen