Advanced

TypeScript

Typed props in a .tsx component

dead view
TypeScript

Key concepts

A component can be written in .tsx instead of .jsx. LiveReact imports the type LiveProps from live_react, so props coming from the server carry types too, and a mismatched prop is caught by the type checker rather than at runtime.

page_html.ex

defmodule MyAppWeb.PageHTML do
  use MyAppWeb, :html

  def typescript(assigns) do
    ~H"""
    <.react name="Typescript" />
    """
  end
end

How it works

Vite transpiles .tsx the same way it transpiles .jsx — types are stripped at build time and never reach the browser. Nothing about registering or rendering the component changes; only the file extension and the type annotations do.