ANHANG G

TSX

Hinter den Kulissen stellt TypeScript eine Reihe von Hooks bereit, mit denen TSX auf konsistent erweiterbare Weise typisiert werden kann. Dies sind besondere Typen im global.JSX-Namensraum, die TypeScript in Ihrem Programm als »Quelle der Wahrheit« für TSX-Typen ansieht.

Wenn Sie nur mit React arbeiten, brauchen Sie diese Hooks nicht zu kennen. Sobald Sie aber eine TypeScript-Bibliothek schreiben, die TSX ohne React verwendet, finden Sie in diesem Anhang hilfreiche Hinweise darüber, welche Hooks Sie benutzen können.

TSX unterstützt zwei Arten von Elementen: einbaute (intrinsiche Elemente) und benutzerdefinierte (wertbasierte Elemente). Intrinsische Elemente werden grundsätzlich in Kleinbuchstaben benannt und beziehen sich auf eingebaute Elemente wie <li>, <h1> und <div>. Die Namen von wertbasierten Elementen werden in PascalCase angegeben. Sie beziehen sich auf Elemente, die Sie mit React (oder einem anderen Framework, das Sie mit TSX verwenden) erstellen. Sie können entweder als Funktionen oder als Klassen definiert werden. Siehe Abbildung G-1.

Abbildung G-1: Die Arten der TSX-Elemente

Wir benutzen als Beispiel die Typdeklarationen von React (http://bit.ly/2CNzeW2), um Ihnen die von TypeScript verwendeten Hooks vorzustellen, die TypeScript einsetzt, um TSX sicher zu typisieren. Hier sehen Sie, wie React sich in TSX einklinkt, um JSX sicher zu typisieren:

declare global {

namespace JSX {

interface Element extends React.ReactElement<any> {}

interface ElementClass extends React.Component<any> {

render(): React.ReactNode

}

interface ElementAttributesProperty {

props: {}

}

interface ElementChildrenAttribute {

children: {}

}

type LibraryManagedAttributes<C, P> = // ...

interface IntrinsicAttributes extends React.Attributes {}

interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {}

interface IntrinsicElements {

a: React.DetailedHTMLProps<

React.AnchorHTMLAttributes<HTMLAnchorElement>,

HTMLAnchorElement

>

abbr: React.DetailedHTMLProps<

React.HTMLAttributes<HTMLElement>,

HTMLElement

>

address: React.DetailedHTMLProps<

React.HTMLAttributes<HTMLElement>,

HTMLElement

>

// ...

}

}

}

1. JSX.Element ist der Typ eines wertbasierten TSX-Elements.
2. JSX.ElementClass ist der Typ einer Instanz einer wertbasierten Klassenkomponente. Sobald Sie eine Klassenkomponente deklarieren, die mit der TSX-eigenen <MyComponent />-Syntax instanziiert werden soll, muss dessen Klasse die Voraussetzungen dieses Interface erfüllen.
3. JSX.ElementAttributesProperty ist der Namen einer Eigenschaft, die TypeScript untersucht, um zu ermitteln, welche Attribute eine Komponente unterstützt. Für React ist das die props-Eigenschaft. TypeScript sucht diesen Wert an einer Klasseninstanz.
4. JSX.ElementChildrenAttribute ist der Name der Eigenschaft, die TypeScript untersucht, um herauszufinden, welche Typen die Kindelemente einer Komponente unterstützen. Für React ist dies die Eigenschaft children.
5. JSX.IntrinsicAttributes ist der Satz an Attributen, die von allen Elementen unterstützt werden. Für React ist dies das Attribut key.
6. JSX.IntrinsicClassAttributes ist der Satz an Attributen, die von allen Klassenkomponenten (intrinsisch und wertbasiert) unterstützt werden. Für React ist das ref.
7. JSX.LibraryManagedAttributes gibt weitere Orte an, an denen JSX-Elemente Eigenschaftstypen deklarieren und initialisieren können. React verwendet propTypes als alternativen Ort zur Deklaration von Eigenschaftstypen und defaultProps als Ort für die Deklaration von Standardwerten und -eigenschaften.
8. JSX.IntrinsicElements listet alle Typen von HTML-Elementen auf, die in TSX verwendet werden können. Dabei werden die Tagnamen der Elemente auf die Typen ihrer Attribute und Kindelemente abgebildet. Da JSX kein HTML ist, müssen die Typdeklarationen von React TypeScript genau mitteilen, welche Elemente möglicherweise in einem TSX-Ausdruck benutzt werden können. Und weil Sie beliebige Standard-HTML-Elemente in TSX verwenden dürfen, müssen die Deklarationen für jedes Element, inklusive der Typen möglicher Attribute und Kindelemente, aufgelistet werden (für ein <a>-Tag gehören zu den gültigen Attributen beispielsweise href: string und rel: string, aber nicht value).

Durch die Deklaration dieser Typen im globalen JSX-Namensraum können Sie TypeScripts Typechecker-Verhalten für TSX anzapfen und es nach Belieben anpassen. Solange Sie keine Bibliothek schreiben, die TSX (aber nicht React) verwendet, werden Sie diese Hooks vermutlich nie anfassen.