Programando o TypeScript

Apêndice G. TSX

Por baixo do capô, o TypeScript expõe alguns ganchos para digitar TSX de uma forma conectável. Estes são tipos especiais no espaço de nomes global.JSX que o TypeScript considera como a fonte de verdade para os tipos TSX em todo o teu programa.

Nota

Se estiveres a usar apenas o React, não precisas de saber sobre estes hooks de baixo nível, mas se estiveres a escrever uma biblioteca TypeScript que usa TSX sem React, este apêndice fornece uma referência útil para os hooks que podes usar.

O TSX suporta dois tipos de elementos: os incorporados(elementos intrínsecos) e os definidos pelo utilizador(elementos baseados em valores). Os elementos intrínsecos têm sempre nomes em minúsculas e referem-se a elementos incorporados como <li>, <h1>, e <div>. Os elementos baseados em valores têm nomes em PascalCased e referem-se aos elementos que crias com React (ou qualquer estrutura de frontend com a qual estejas a utilizar o TSX); podem ser definidos como funções ou como classes. Veja a Figura G-1.

Figura G-1. Tipos de elementos TSX

Usando as declarações de tipo do React como exemplo, vamos percorrer os ganchos que o TypeScript usa para digitar TSX com segurança. Aqui está como o React se conecta ao TSX para digitar JSX com segurança:

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