microsoft / microsoft/TypeScript

JSX Fragments are in-properly typed with `<></>` syntax, when using `react-jsx` JSX option

Đang mở
#62,358 0 bình luận 5 reaction 1 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Bug Domain: JSX/TSX Help Wanted
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

JSX, Fragment, children type

### 🕗 Version & Regression Information

Bug exists since TypeScript introduces `"jsx": "react-jsx"` from version 4.1.2 until `next` version (`6.0.0-dev.20250830`).

### ⏯ Playground Link

https://stackblitz.com/edit/stackblitz-starters-sffhmvvz?file=index.tsx

### 💻 Code

```tsx
import { Fragment } from "@/jsx-runtime";

{"ok"}
{({ foo }) => "also ok"}
;

<>
{"ok"}
{({ foo }) => "not ok"}
{/* ^ Binding element 'foo' implicitly has an 'any' type. */}
;
```

With following `@/jsx-runtime` definition:

```ts
export const jsx = (...args: unknown[]) => {};

type JsxElement =
| JsxElementArray
| undefined
| string
| ((arg: { foo: "bar " }) => void);
interface JsxElementArray extends Array {}

interface FragmentProps {
children?: JsxElement;
}

export const Fragment = (props: FragmentProps) => {};
```

and tsconfig:

```json
{
"compilerOptions": {
"strict": true,
"jsx": "react-jsx",
"jsxImportSource": "@",
// [...]
}
}
```

### 🙁 Actual behavior

The first JSX expression using `` pass the type checking while the second JSX using `<>` syntax reports error due to it's children was typed to `any`:
```
index.tsx:10:7 - error TS7031: Binding element 'foo' implicitly has an 'any' type.

10 {({ foo }) => "not ok"}
~~~

Found 1 error in index.tsx:10
```

### 🙂 Expected behavior

These two JSX expressions should both pass the type checking.

### Additional information about the issue

This issue was first mentioned at #50429 and fixed in #59933, but the fix only take effects on `"jsx": "react"` not `"jsx": "react-jsx"`, while the latter is a more encouraged approach in a modern project.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.