Typorithm · easy

TypeScript & JSX Natively

bun-typescript-jsxbuntypescriptjsxtranspiler

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn TypeScript & JSX Natively

Bun Runtime

Bun runs .ts, .tsx, and .jsx files directly with a built-in transpiler — no tsc, babel, or ts-node. It only strips types (no type-checking at runtime), and JSX is configured in tsconfig.json or bunfig.toml.

Bun ships its own transpiler, so bun run index.ts and bun index.tsx execute TypeScript and JSX directly with no tsc, babel, or ts-node in the chain.

The transpiler does type-stripping only: it removes the type annotations and runs the resulting JavaScript, so type errors are never caught at runtime — run tsc --noEmit separately if you want type-checking.

JSX behaviour (the pragma, automatic vs classic runtime, jsxImportSource) is read from your tsconfig.json or from bunfig.toml, just like a normal TypeScript project.

Runs .ts/.tsx/.jsx directly — no tsc, babel, or ts-node.

Type-stripping only: no type-checking at runtime.

JSX is configured in tsconfig.json or bunfig.toml.

bun run index.ts          // run TypeScript directly
bun index.tsx             // run JSX/TSX, no tsc or babel
// type-stripping only — no type-checking at runtime
// configure JSX in tsconfig.json or bunfig.toml

Read the implementation

Connect each part of the code to the concept before you type.

1. Run TypeScript

bun run index.ts executes a .ts file directly — Bun's built-in transpiler handles it with no tsc step.

bun run index.ts          // run TypeScript directly

2. Run JSX/TSX

Bun runs .tsx and .jsx files natively; you do not need babel or ts-node to handle the JSX.

bun index.tsx             // run JSX/TSX, no tsc or babel

3. Type-stripping

Bun strips types to run the code; it does NOT type-check, so type errors won't stop execution.

// type-stripping only — no type-checking at runtime

4. Configure JSX

JSX pragma and runtime are read from tsconfig.json (jsx/jsxImportSource) or bunfig.toml.

// configure JSX in tsconfig.json or bunfig.toml

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.