Programación TypeScript

Apéndice G. TSX

Bajo el capó, TypeScript expone algunos ganchos para escribir TSX de forma conectable. Se trata de tipos especiales en el espacio de nombres global.JSX que TypeScript considera como la fuente de verdad para los tipos TSX en todo tu programa.

Nota

Si sólo utilizas React, no necesitas conocer estos ganchos de bajo nivel, pero si estás escribiendo una biblioteca TypeScript que utiliza TSX sin React, este apéndice proporciona una referencia útil para los ganchos que puedes utilizar.

TSX admite dos tipos de elementos: los incorporados(elementos intrínsecos) y los definidos por el usuario(elementos basados en valores). Los elementos intrínsecos siempre tienen nombres en minúsculas, y se refieren a elementos incorporados como <li>, <h1>, y <div>. Los elementos basados en valores tienen nombres en PascalCased, y se refieren a los elementos que creas con React (o con cualquier framework de frontend con el que estés utilizando TSX); pueden definirse como funciones o como clases. Ver Figura G-1.

Figura G-1. Tipos de elementos TSX

Utilizando las declaraciones de tipos de React como ejemplo, recorreremos los ganchos que TypeScript utiliza para escribir TSX de forma segura. Así es como React se conecta a TSX para escribir JSX de forma segura:

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any> {} 
    interface ElementClass extends React.Component ...