Wie kann ich Attribute hinzufügen, um die vorhandenen HTML-Elemente im Typoskript/JSX?
Jemand wissen, wie Sie richtig hinzufügen/erweitern, werden alle systemeigenen HTML-element Attribute mit benutzerdefinierten lieben?
Mit das Typoskript Dokumentation für die Zusammenführung der Schnittstellen, ich dachte, ich könnte das einfach machen:
interface HTMLElement {
block?: BEM.Block;
element?: BEM.Element;
modifiers?: BEM.Modifiers;
}
<div block="foo" />; //error
Aber ich bekomme die folgende Intellisense-Fehler in vscode 1.6.1 (spätestens):
[ts] - Eigenschaft 'block' existiert nicht auf Typ 'HTMLProps'.
Den HTMLProps
auf die Sie sich beziehen, ist React.HTMLProps<T>
und die div
element deklariert ist, verwenden Sie es wie so:
namespace JSX {
interface IntrinsicElements {
div: React.HTMLProps<HTMLDivElement>
}
}
Ich habe versucht, redeclaring die div
, aber ohne Erfolg.
Verwandte: https://github.com/Microsoft/TypeScript/issues/11684
Edit: Hier ist, was schließlich für mich arbeiten:
declare module 'react' {
interface HTMLAttributes<T> extends DOMAttributes<T> {
block?: string
element?: string
modifiers?: Modifiers //<-- custom interface
}
}
- Was
extend
ingReact.HTMLProps<T>
? Oder sogar Verschmelzung Erklärungen mitReact.HTMLProps<T>
? - Ich habe beide ausprobiert und Sie funktionieren nicht gut. Verlängerung nicht helfen, denn ich kann nicht zwingen, es zu benutzen, mein interface, es müssen nur
React.HTMLProps<T>
Zusammenführen und Erklärungen einfach nicht funktioniert, es völlig ignoriert haben. Wenn du einen Fall wo es funktioniert, überlegen Sie als Antwort. - die Zusammenlegung der Erklärungen einfach nicht arbeiten, ich nehme an, du meinst
namespace React { interface HTMLProps<T> { /*custom elements here*/ } }
? Ich weiß nicht, was dieHTMLProps
Erklärung aussieht, kann es notwendig sein, zu entsprechen. - Ich habe eine Frage: warum ist dies nötig? Ist es ein problem mit der
data-*
Eigenschaften? - können Sie erstellen, Spielplatz, codepen oder jsfiddle ?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sieht aus wie in älteren Versionen von type definition Dateien (v0.14) die Schnittstellen wurden einfach erklärt, im Rahmen einer globalen Reagieren namespace, also früher konnte man verwenden die standard-syntax Zusammenführen.
Jedoch die neue version von d....ts-Datei (v15.0) erklärten, alles in einem Modul. Da Module nicht unterstützen, Zusammenführen, um das beste aus meinem wissen der einzige option jetzt zu sein scheint
module augmentation
:https://www.typescriptlang.org/docs/handbook/declaration-merging.html
Habe ich das folgende experiment, und es funktionierte für mich:
Offensichtlich ist dies Recht mühsam, Sie könnten die augmentation code in eine andere Datei wie im Beispiel gezeigt aus dem Typoskript Handbuch, und importieren es:
Aber es ist immer noch ziemlich schmutzig. Also vielleicht ist es am besten, um das Problem mit den Mitwirkenden des type definition-Datei.
Ich wollte Glamour ist createElement Ersatz fügt eine
css
prop zu jedem element.Hinzufügen, um die akzeptierten Antworten, Modul-augmentation scheint, den trick zu tun, aber
HTMLProps
arbeitete nur für non-input-Elemente. Die richtigen Schnittstellen zu erweitern zu sein scheintHTMLAttributes
undSVGAttributes
.Zu vermeiden, importieren Sie das Modul augmentation in jeder Komponente, zu re-exportieren createElement:
Dann sagen TS für die Nutzung unserer
createElement
für JSX mit diesem tsconfig:Verwendung:
Einem up-to-date-Beispiel (Mai 2019)
Reagieren type definition-Datei (standardmäßig -
index.d.ts
beim starren mitcreate-react-app
) enthalten die Liste aller standard-HTML-Elemente, sowie bekannte Attribute.Damit benutzerdefinierte HTML-Attribute, die Sie brauchen, um zu definieren, es ist die Typisierung.
Tun, dass durch die Ausweitung
HTMLAttributes
Schnittstelle:Für vue, folgende Werke: