microsoft / microsoft/TypeScript

Translate JSX elements based on objects

Aperta
#32,619 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Awaiting More Feedback Domain: JSX/TSX Suggestion
Lingua principale
Go
Stelle
111k
Fork
14.3k
Merge medio
1g 19h
PR unite (30g)
117

Descrizione

When using a custom jsxFactory, it is currently only possible to use something that is a string or callable as the JSX element tag. I do not see a reason why there should be such limitation. In my use case I would like to use objects as "blueprints" for my jsx factory.

TypeScript Version: 3.5.1

Search Terms:
jsx jsxFactory object TS2604

Code

/*
 * @jsx h
 */

function h (...args: any[]): string {
  return 'something';
}

function FuncComponent() {
  return '';
}
const StringComponent = 'test';
const ObjectComponent = { key: 'test '};

// works
const dom1 = <FuncComponent text="hello world" />;

// works
const dom3 = <StringComponent text="hello world" />;

// doesnt work
const dom4 = <ObjectComponent text="hello world" />;

Expected behavior:
JSX element <ObjectComponent text="hello world" /> should be translated to h(ObjectComponent, { text: "hello world" }).

Actual behavior:
Typescript throws an error: JSX element type 'ObjectComponent' does not have any construct or call signatures.

Playground Link:
https://www.typescriptlang.org/play/index.html?jsx=2#code/PQKgsAUABCUAICsDOAPKALSNiUgMwFcA7AYwBcBLAeyIygAoA6ZgQwCcBzJALihaICeAbQC6ASl5IybCkQ5QA3lihsApmQJtaAciRUAtuvSyO2gNyQAvrgiFSlGlABixEgGEDABxqqiZemKKymoaWlDa5laQJDRSUADK0iYe+t5EvmRQALzhZKpSkRAxRHEA8gBGCKrkKWkZ2YpQANaqArzaeXHalhYQkMDAUADuVGxNSNGxmQAmBgCMDQA8LqS1Pn5QeShkWQBE6KoANodUw6OH07tQwAB8vf2DI2MTRVNQs-oAzEuJMnJr6Q2Wx2+yOJzObAuV1u9wgA3eVHyGyeTUmJRmBgALEsKlUal51plgXsDsdTk8odc7pAgA

Related Issues:
N/A

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con la riproduzione TSX fornita e il link a Playground, quindi segui il percorso di controllo dei tipi degli elementi JSX per la gestione di jsxFactory personalizzata. Il lavoro è completo quando vengono accettati i tag JSX con valore oggetto, come ObjectComponent, e l'esempio viene tradotto in h(ObjectComponent, { text: "hello world" }) senza l'errore relativo all'assenza di firme di costruzione o di chiamata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
compilers
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.