Utilrix

Online TypeScript Compiler

Write and run TypeScript in your browser — compiled by the real tsc, with console output and no server round-trip.

1:1
OUTPUT

Press Run — output appears here. Everything executes in this tab, so nothing is uploaded and there is no queue to wait in.

Runs in a sandboxed worker in this tab — no server, and a runaway loop is stopped after 8s instead of hanging.

TypeScript examples you can run

Every one of these is loaded from the Examples menu in the editor above — press Run and it works. They are printed here so you can read the code before you run it.

Interfaces & generics

An interface with an optional field, typed array literals, and a function with an explicit return type.

interface User {
  name: string;
  role: "admin" | "editor" | "viewer";
  score?: number;
}

const users: User[] = [
  { name: "Vivek", role: "admin", score: 92 },
  { name: "Rahul", role: "editor", score: 78 },
  { name: "Amit", role: "viewer" },
];

function topScorer(list: User[]): User | undefined {
  return [...list].sort((a, b) => (b.score ?? 0) - (a.score ?? 0))[0];
}

console.log(users.map((user) => user.name));
console.log("Top:", topScorer(users));

// Types are stripped before running, so a type error won't stop execution.
const total: number = users.reduce((sum, user) => sum + (user.score ?? 0), 0);
console.log("Total score:", total);

Generic functions

A generic groupBy with a constrained key parameter — the shape of most real utility code.

function groupBy<T, K extends string | number>(
  items: T[],
  key: (item: T) => K
): Record<K, T[]> {
  const groups = {} as Record<K, T[]>;
  for (const item of items) {
    const group = key(item);
    (groups[group] ??= []).push(item);
  }
  return groups;
}

type Order = { id: string; city: string; total: number };

const orders: Order[] = [
  { id: "A-1", city: "Jaipur", total: 2400 },
  { id: "A-2", city: "Pune", total: 990 },
  { id: "A-3", city: "Jaipur", total: 1500 },
];

const byCity = groupBy(orders, (order) => order.city);
console.log(Object.keys(byCity));
console.log(byCity.Jaipur.map((order) => order.total));

Enums & unions

A string enum driving an exhaustive switch, plus Object.values to list the members.

enum Status {
  Draft = "draft",
  Live = "live",
  Archived = "archived",
}

type Post = {
  title: string;
  status: Status;
};

const posts: Post[] = [
  { title: "Hello", status: Status.Live },
  { title: "Draft idea", status: Status.Draft },
  { title: "Old news", status: Status.Archived },
];

function describe(post: Post): string {
  switch (post.status) {
    case Status.Live:
      return post.title + " is published";
    case Status.Draft:
      return post.title + " is not ready";
    default:
      return post.title + " is archived";
  }
}

posts.forEach((post) => console.log(describe(post)));
console.log(Object.values(Status));

Classes with modifiers

Access modifiers, a readonly parameter property, method chaining with `this`, and a getter.

class Account {
  private balance = 0;

  constructor(public readonly owner: string, opening: number = 0) {
    this.balance = opening;
  }

  deposit(amount: number): this {
    if (amount <= 0) throw new RangeError("Deposit must be positive");
    this.balance += amount;
    return this;
  }

  withdraw(amount: number): this {
    if (amount > this.balance) throw new RangeError("Insufficient funds");
    this.balance -= amount;
    return this;
  }

  get statement(): string {
    return `${this.owner}: ${this.balance}`;
  }
}

const account = new Account("Vivek", 5000);
account.deposit(2500).withdraw(1200);
console.log(account.statement);

try {
  account.withdraw(999999);
} catch (error) {
  console.error((error as Error).message);
}

TypeScript quick reference

The syntax people look up most often. Copy any line into the editor above to see what it does.

Type annotations

WhatSyntaxNotes
Variableconst n: number = 1Usually unnecessary — inference is better.
Functionfunction f(a: string): numberAnnotate parameters; let the return infer.
Arraystring[] or Array<string>Identical meaning.
Tuple[string, number]Fixed length, fixed positions.
Uniontype S = "on" | "off"One of a fixed set.
Optionalscore?: numbernumber | undefined.
Assertionvalue as UserTrust me; no runtime check happens.

Utility types

WhatSyntaxNotes
PartialPartial<User>Every field optional.
RequiredRequired<User>Every field mandatory.
PickPick<User, "id" | "name">Keep only those keys.
OmitOmit<User, "password">Drop those keys.
RecordRecord<string, User[]>An object used as a map.
ReturnTypeReturnType<typeof fn>What a function gives back.
AwaitedAwaited<ReturnType<typeof f>>Unwraps the Promise.

Narrowing

WhatSyntaxNotes
typeofif (typeof x === "string")Primitives.
instanceofif (err instanceof Error)Classes.
inif ("id" in value)Discriminating by property.
Discriminated unionswitch (shape.kind)The safest way to model variants.
Type guardfunction isUser(v: unknown): v is UserTeach the compiler your own check.

Other languages you can run here

Processed 100% in your browser — nothing you enter here is ever uploaded.

Common use cases

Trying a type before committing to it

Work out whether that mapped type or conditional type does what you think, without touching your real project.

Learning TypeScript

Interfaces, generics, enums, unions and access modifiers, each with a runnable example you can edit and rerun.

Reproducing a bug for a colleague

Cut the problem down to a few lines, then send a link that opens with exactly that code in the editor.

Checking what TypeScript compiles to

Because the real compiler runs, the runtime behaviour you see is the behaviour your build will produce.

How to use the TS Compiler

Write TypeScript in the editor and press Run, or Ctrl + Enter. The first run fetches the official TypeScript compiler; after that it is cached and runs instantly.

Your code is compiled by tsc itself — not a shortcut type stripper — so generics, enums, decorators, parameter properties and satisfies all behave as they should.

Output appears in the console on the right in Node's format. Runtime errors report their line number; click it to jump there.

Suggestions include the utility types — Record, Partial, Pick, Omit — plus keywords and the identifiers already in your file. Ctrl + Space asks for them explicitly.

Open the Input panel to feed values to readline() or prompt(), one per line.

Press ZIP for a project with tsconfig.json and a tsx script ready to run, or Share for a link that carries your code.

Frequently asked questions

Related tools

JS CompilerPython CompilerSQL EditorHTML/CSS/JS Editor