Programmation TypeScript

Annexe G. TSX

Sous le capot, TypeScript expose quelques crochets pour typer TSX de manière enfichable. Il s'agit de types spéciaux sur l'espace de noms global.JSX que TypeScript considère comme la source de vérité pour les types TSX tout au long de ton programme.

Note

Si tu utilises simplement React, tu n'as pas besoin de connaître ces crochets de bas niveau, mais si tu écris une bibliothèque TypeScript qui utilise TSX sans React, cette annexe fournit une référence utile pour les crochets que tu peux utiliser.

TSX prend en charge deux types d'éléments : les éléments intégrés(éléments intrinsèques) et les éléments définis par l'utilisateur(éléments basés sur des valeurs). Les éléments intrinsèques ont toujours des noms en minuscules et font référence aux éléments intégrés tels que <li>, <h1>, et <div>. Les éléments basés sur des valeurs ont des noms en majuscules Pascal et font référence aux éléments que tu crées avec React (ou tout autre framework frontal avec lequel tu utilises TSX) ; ils peuvent être définis soit comme des fonctions, soit comme des classes. Voir la figure G-1.

Figure G-1. Les types d'éléments de la TSX

En utilisant les déclarations de type de React comme exemple, nous allons parcourir les crochets que TypeScript utilise pour typer TSX en toute sécurité. Voici comment React s'accroche à TSX pour taper JSX en toute sécurité :

declare global {
  namespace JSX