microsoft / microsoft/TypeScript

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

Abierto
#62,358 0 comentarios 5 reacciones 1 asignado Ver en GitHub

Nadie ha tomado este issue todavía.

Bug Domain: JSX/TSX Help Wanted
Lenguaje dominante
Go
Estrellas
111k
Forks
14.3k
Merge medio
2 d 4 h
PR fusionados (30 d)
132

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.