Programming TypeScript

Appendix G. TSX

Under the hood, TypeScript exposes a few hooks for typing TSX in a pluggable way. These are special types on the global.JSX namespace that TypeScript looks at as the source of truth for TSX types throughout your program.

Note

If you’re just using React, you don’t need to know about these low-level hooks, but if you’re writing a TypeScript library that uses TSX without React, this appendix provides a helpful reference for the hooks you can use.

TSX supports two kinds of elements: built-in ones (intrinsic elements) and user-defined ones (value-based elements). Intrinsic elements always have lowercased names, and refer to built-in elements like <li>, <h1>, and <div>. Value-based elements have PascalCased names, and refer to those elements that you create with React (or whatever frontend framework you’re using TSX with); they can be defined either as functions or as classes. See Figure G-1.

Figure G-1. The kinds of TSX elements

Using React’s type declarations as an example, we’ll walk through the hooks TypeScript uses to safely type TSX. Here’s how React hooks into TSX to type JSX safely:

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any> {} 
    interface ElementClass extends React.Component<any> { 
      render(): React.ReactNode
    }
    interface ...