microsoft / microsoft/TypeScript

Translate JSX elements based on objects

Offen
#32,619 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Awaiting More Feedback Domain: JSX/TSX Suggestion
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.3k
Ø Merge
1 T. 19 Std.
Gemergte PRs (30 T.)
117

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der bereitgestellten TSX-Reproduktion und dem Playground-Link und verfolge anschließend den Type-Checking-Pfad für JSX-Elemente bei der Verarbeitung von benutzerdefiniertem jsxFactory. Als abgeschlossen gilt die Aufgabe, wenn JSX-Tags mit Objektwerten wie ObjectComponent akzeptiert werden und das Beispiel in h(ObjectComponent, { text: "hello world" }) übersetzt wird, ohne dass ein Fehler bezüglich Konstruktor- oder Aufrufsignaturen auftritt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.