microsoft / microsoft/TypeScript

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

オープン
#62,358 コメント 0 件 リアクション 5 件 担当者 1 名 GitHub で見る

まだ誰も着手していません。

Bug Domain: JSX/TSX Help Wanted
主要言語
Go
スター
111k
フォーク
14.3k
平均マージ
2日 4時間
マージ済み PR(30日)
132

説明

### 🔎 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.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。