microsoft / microsoft/TypeScript
Pipe function + `React.memo` returns component with `any` props
Nessuno ha ancora preso questa issue.
- Lingua principale
- Go
- Stelle
- 111k
- Fork
- 14.3k
- Merge medio
- 2g 4h
- PR unite (30g)
- 132
Descrizione
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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con il riproduttore StackBlitz e l'esempio generico di pipeWith, confrontando React.memo(MyComponent) con pipeWith(MyComponent, React.memo). Leggi il comportamento dell'inferenza dei tipi di TypeScript coinvolto nella dichiarazione di React.memo di @types/react 16.9.35. Il lavoro è completato quando il risultato della pipeline inferisce Props invece di any, preservando al contempo il comportamento della chiamata diretta.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- compilers
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100