microsoft / microsoft/TypeScript
Pipe function + `React.memo` returns component with `any` props
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- Go
- Estrellas
- 111k
- Forks
- 14.3k
- Merge medio
- 2 d 4 h
- PR fusionados (30 d)
- 132
Descripción
TypeScript Version: 3.9.2
Search Terms: generic pipe pipeWith react memo HOC props any
Code
import * as React from 'react';
declare function pipeWith<A, B>(a: A, ab: (a: A) => B): B;
type Props = { foo: number };
declare const MyComponent: React.FunctionComponent<Props>;
// ✅ correct props type
// React.NamedExoticComponent<Props>
const r1 = React.memo(MyComponent);
// ❌ `any` props type
// React.MemoExoticComponent<React.ComponentType<any>>
const r2 = pipeWith(MyComponent, React.memo);
// Workaround
// ✅ correct props type
// React.NamedExoticComponent<Props>
const r3 = pipeWith(MyComponent, (C) => React.memo(C));
Using latest version of @types/react (at the time of writing: 16.9.35).
Expected behavior:
See above.
Actual behavior:
See above.
Playground Link:
https://stackblitz.com/edit/react-ts-4ih6jn
Related Issues:
https://github.com/microsoft/TypeScript/issues/25637, although that was closed as a duplicate of an issue which has since been closed (https://github.com/microsoft/TypeScript/issues/10957), so I decided to post a new issue.
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con el reproductor de StackBlitz y el ejemplo genérico de pipeWith, comparando React.memo(MyComponent) con pipeWith(MyComponent, React.memo). Lee el comportamiento de inferencia de tipos de TypeScript relacionado con la declaración de React.memo de @types/react 16.9.35. Se considera terminado cuando el resultado canalizado infiere Props en lugar de any, preservando al mismo tiempo el comportamiento de la llamada directa.
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
- 35/100