microsoft / microsoft/TypeScript
This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided
- Ngôn ngữ chính
- Go
- Star
- 111k
- Fork
- 14.3k
- Merge trung bình
- 2 ngày 4 giờ
- Pull request đã merge (30 ngày)
- 132
Mô tả
### 🔎 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.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện tối thiểu trong Playground hoặc repository được liên kết, sau đó đọc đường dẫn kiểm tra children của JSX trong src/compiler/checker.ts, xung quanh phần kiểm tra getIndexedAccessType gần dòng 21585. Xác minh hành vi bằng ví dụ StringChildren được cung cấp và các kiểu định nghĩa React 19 liên quan; hoàn thành khi child string đơn hợp lệ không còn phát ra ts(2745).
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- typescript
- Lĩnh vực
- compilers
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 45/100