microsoft / microsoft/TypeScript
This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided
还没有人认领这个 Issue。
- 主要语言
- Go
- 星标
- 111k
- 派生
- 14.3k
- 平均合并
- 2 天 4 小时
- 30 天内合并 PR
- 132
描述
### 🔎 Search Terms
This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided. ts(2745)
ts2745
### 🕗 Version & Regression Information
- Reproducible in 5.0.3 - 5.8.3
- The error message was different in 4.9.5 and below: "Property 'children' is missing in type '{}' but required in type '{ children: string; }'"
### ⏯ Playground Link
https://www.typescriptlang.org/play/?target=99&isolatedModules=true&ts=5.8.3#code/MYewdgzgLgBASgUwIbFgXhgb2AJ2VBAUQBsEBbBMKAGhgDEckBzCqgXwCgOB6bmAFQAWASwgwAUgGUAGjCjMA5GIXARxACZ4wCmAAccIXTAQAPXQlRioAT3MwlUHMLBMdAdxGqYeAI4BXYTwxMj9iKGFdUhhVYQ0tWgAjP1hwYmsYJBgIZyYomI0YNyQxfRAAN2F1BHUAOigIAAoAJgB2ABYAVgBKDlBIEFIa4hAmBoAeSUccgGE1TUoAPkzoJxcx7knVplnY+bAFroBuDgAzPzBUYXAYTZm5rQbMaPvKGDYALixn3a1PlZy3l0sBwYN4EFA-DgwN84pRjpweHwAOogHAAazEJ2cCEKwigghAyRhe164AgAwQQxG4wAciAdrDodwDsczhdwtc6Qy9g0gZgQTBePRGCxKLA3KiMTAsWAEAK8BCoTAxksslM1sz4VwhQBJGDqcAKWBosAgNwwYQnOQiMSiMHEJAEdTvRESGTGUisWDCMiRYTAPFpGCCYpyWw4hRIMDWHQJCxIPwQHGmi1UBA4E4oCNSaQ1HVUVbZYAkchiiA6Uyiep1RotAAMTQAbD0+uTBsNRmN1MIyoKWdq+Dmw7oAXaEsVqtLQkHrogULAAIwATmHOQgiSJ2V9xEtwknUBAMDIzh9SGIYNK6j8AYSUVMSG3cqFhBM86D+JxEAfOPTBhwMBAYBgEhMQ3DxQR4GQVBVxcCBXQaQQoCgXQIHeXgmHAvwEhqUAyG4AARBAZTxBA0n4cN1AIoiTwIMiKO4W8QASbgyGKAgcG4GxzAgbg8HnbhnCqEwalqeoelMXRUVgKpgAdPAp3ZK5oVwfAiE9MUGgFJNiE+KNrGoAV1EdJAAH5dOjAzQQIEwoDMjJow4LpPhzGoSy9Y4OAkqT9QsOScVbWAGGYL1PgaUoUM+flQXyPY7JctyxXhIE0AWN1cwSqgPK8nBYDAb8IF0LM0uBUFstgLicQy9ABVBAAfNUthqmB6rAPwyDjHAmvqhJhAwqgupgHV2KQW8EDGKqFgGhIQApKMBta4hiAG84qhlapjlKsxvOcdjM2ASr1KoABBJCnCSAgIAABQMcwcvSTBOE2ySctTXaiqq7ktBOqZzpxJ4Yq0OyqsOR7jC2l6dvTPacXzdUi2+s7kgQMQHoFMrXqhorYcLf0qpR-Ue0ii11Ds-4XDeEGODYIA
### 💻 Code
```tsx
const React = {createElement, Fragment}
// This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.ts(2745)
console.log(a string);
function StringChildren({ children }: { children: string }) {
return children;
}
// Works fine without children
console.log();
function NoChildren() {
// Fragment works fine
return <>a string;
}
// I don't know if this is related:
// JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)
console.log(
// JSX typing is based fully on React 19 typings, but simplified to minimal reproducible example
// Exactly the same error occurs with React typings
// (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)
export declare function createElement(
sel: any,
data?: any,
text?: any
): JSX.Element;
export declare const Fragment: (props: {
children?: JSX.Element;
}) => JSX.Element;
export namespace JSX {
export type Element =
| string
| number
| bigint
| Iterable
| boolean
| null
| undefined;
export interface ElementAttributesProperty {}
export interface ElementChildrenAttribute { children?: Element;}
export interface IntrinsicAttributes {}
export interface IntrinsicElements { div: { id?: string };}
}
```
### 🙁 Actual behavior
Calling JSX component that accepts `string` children type emits the following error:
> This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.ts(2745)
### 🙂 Expected behavior
No error should be emitted
### Additional information about the issue
**The exact same error is reproducible with official React 19 typings**. See tiny reproduction repository: https://github.com/maxpatiiuk/typescript-react-19-jsx-bug
---
Looking at https://github.com/microsoft/TypeScript/blob/main/src/compiler/checker.ts, the error is triggered by the following check:
```ts
// Line 21585:
else if (!isTypeRelatedTo(getIndexedAccessType(source, childrenNameType), childrenTargetType, relation)) {
// arity mismatch
result = true;
const diag = error(
containingElement.openingElement.tagName,
Diagnostics.This_JSX_tag_s_0_prop_expects_type_1_which_requires_multiple_children_but_only_a_single_child_was_provided,
childrenPropName,
typeToString(childrenTargetType),
);
if (errorOutputContainer && errorOutputContainer.skipLogging) {
(errorOutputContainer.errors || (errorOutputContainer.errors = [])).push(diag);
}
}
```
It appears that `getIndexedAccessType(source, childrenNameType)` tries to get the indexed type of `string`, which returns `unknown` type, which is not considered related to `string` type.
---
Potentially related to https://github.com/microsoft/TypeScript/issues/60572, however the suggested workaround in that issue is not working.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
先在 Playground 或链接的仓库中完成最小复现,然后阅读 src/compiler/checker.ts 中 21585 行附近、围绕 getIndexedAccessType 检查的 JSX children 检查路径。使用提供的 StringChildren 示例和相关的 React 19 类型定义验证行为;完成的标准是有效的单个字符串 child 不再发出 ts(2745)。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- typescript
- 领域
- compilers
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 描述清楚
- 新手友好度
- 45/100