TypeScript Editor

What this TypeScript editor is good for

TypeScript is JavaScript with static types added. You describe the shape of your data with annotations and interfaces, the TypeScript compiler checks that your code respects those shapes, then outputs plain JavaScript for browsers or Node.js. This editor lets you write and edit .ts code in the browser with syntax highlighting tuned for type syntax.

Typical uses: sketching an interface or type before adding it to a project, tidying a snippet for a pull request description, or practising generics and union types while you learn. You get find and replace, word wrap, a dark theme, fullscreen, bracket matching and a download that saves the file as script.ts.

Be aware of what's missing. The page has no TypeScript compiler, so there's no type checking, no red underlines on errors and no hover information about types. The code isn't compiled or run either. For that, use the steps under "Checking and running your code".

Example: a typed helper with generics

type Status = "draft" | "published" | "archived";

interface Post {
  id: number;
  title: string;
  status: Status;
  tags?: string[];
}

function countBy<T, K extends PropertyKey>(items: T[], key: (item: T) => K): Record<K, number> {
  const counts = {} as Record<K, number>;
  for (const item of items) {
    const k = key(item);
    counts[k] = (counts[k] ?? 0) + 1;
  }
  return counts;
}

const posts: Post[] = [
  { id: 1, title: "Hello", status: "published" },
  { id: 2, title: "Draft notes", status: "draft", tags: ["wip"] },
];

console.log(countBy(posts, (p) => p.status)); // { published: 1, draft: 1 }

The snippet passes tsc --strict with TypeScript 5. Try changing "draft" to "drafts" in the array: the compiler would reject it because the value isn't one of the three Status strings, but this editor won't warn you, which shows exactly where its job ends.

Checking and running your code

1. Click Download. The file saves as script.ts; keep the .ts extension if you rename it.
2. With Node.js installed, add the compiler to the folder: npm install --save-dev typescript. (Running npx tsc before this step tries to fetch an unrelated package called tsc.)
3. Type-check without producing output: npx tsc --noEmit --strict script.ts.
4. To get JavaScript, run npx tsc script.ts, which writes script.js next to it, then node script.js.
5. For a real project, run npx tsc --init once to create a tsconfig.json and keep compiler settings there.

Node.js 22.18, 23.6 and later versions can also run a .ts file directly with node script.ts. It works by stripping type annotations without checking them, and it rejects syntax that needs code generation, such as enum and namespace. For quick experiments with full type errors in the browser, the official TypeScript Playground compiles as you type.

TypeScript habits that prevent bugs

Types disappear at runtime. The compiler erases every annotation, so const user = data as User doesn't check that an API response really has a User shape. The handbook explains erased types; validate external data at runtime if it matters.

Turn on strict mode. "strict": true in tsconfig.json enables strictNullChecks and related checks. Without it, null and undefined are allowed almost everywhere and many real bugs slip through.

Prefer unknown to any. any switches type checking off for that value. unknown accepts anything too but forces you to narrow it with typeof or a type guard before use.

Interfaces and type aliases mostly overlap. Interfaces can be reopened and extended by declaration merging; type aliases can express unions and mapped types. The handbook's comparison of the two suggests interfaces by default for object shapes.

Related pages

Learn the language step by step in the TypeScript course, keep the TypeScript cheat sheet nearby for syntax, or read the TypeScript language overview. For untyped scripts, the JavaScript editor saves files as .js.