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.

Typescript.tsx

import React from "react";
import type { LiveProps } from "live_react";

function MyButton({ title }: { title: string }) {
  return (
    <button className="bg-indigo-500 py-2 px-3 rounded text-white cursor-pointer">
      {title}
    </button>
  );
}

export function Typescript(_props: LiveProps) {
  return (
    <div className="flex flex-col space-y-4">
      <h1>Typescript</h1>
      <div>
        <MyButton title="I'm a typed button" />
      </div>
    </div>
  );
}

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.