microsoft / microsoft/TypeScript

Component not always a valid JSX component depending on a generic type

Abierto
#54,702 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Domain: JSX/TSX Help Wanted Possible Improvement
Lenguaje dominante
Go
Estrellas
111k
Forks
14.3k
Merge medio
1 d 19 h
PR fusionados (30 d)
117

Descripción

Bug Report

🔎 Search Terms

jsx react generic valid JSX

🕗 Version & Regression Information
  • This changed between versions 5.0.4 and 5.1.3
⏯ Playground Link

Playground Link

💻 Code
import * as React from "react";

const A = <T extends unknown>({ a }: { a: T }) => (typeof a === "string" ? null : new Error("a must be a string")) as T extends string ? null : Error;

const jsxWithError = <A<string> a="a" />;

const B = A<string>;

const jsxWithoutError = <B a="a" />;

🙁 Actual behavior

Error on A in jsxWithError:

'A' cannot be used as a JSX component.
  Its type '<T extends unknown>({ a }: { a: T; }) => T extends string ? null : Error' is not a valid JSX element type.
    Type '<T extends unknown>({ a }: { a: T; }) => T extends string ? null : Error' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Error' is not assignable to type 'ReactNode'.(2786)
🙂 Expected behavior

No error with the generic type provided (as is the case for jsxWithoutError), since we are sure we are using a valid JSX component.

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.

Línea de trabajo

Reproduce el ejemplo vinculado de Playground en TypeScript 5.0.4 y 5.1.3, comparando el uso genérico de JSX de A con el especializado de B. Rastrea el diagnóstico 2786 y asegúrate de que la forma genérica con un argumento de tipo explícito sea aceptada, mientras que el caso de error existente siga siendo significativo.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
compilers
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.