TS Editor

iwantcoding.com ships an in-browser TypeScript editor. The official TypeScript compiler loads from a CDN, transpiles your code to JavaScript, and runs the result — all client-side.

What you can do

• Write any modern TypeScript — types, generics, classes, interfaces, enums, async, decorators (stage 3).
• See type errors surfaced before the code runs.
• Get console.log / console.warn / console.error in the output pane.
• Use modern JS APIs — fetch, Promise, JSON, Math, Date, Set, Map, URL.
• Pick from sample programs in the toolbar dropdown.

How it works under the hood

1. You write TS in the editor.
2. Press Run — the official typescript npm package (loaded from jsDelivr) transpiles to JavaScript.
3. Type errors appear in the output pane in red.
4. The transpiled JS runs in a sandboxed iframe.
5. console.log in the iframe streams back to the output pane.

Sample to try

type Shape =
    | { kind: 'circle'; r: number }
    | { kind: 'rect';   w: number; h: number };

function area(s: Shape) {
    switch (s.kind) {
        case 'circle': return Math.PI * s.r ** 2;
        case 'rect':   return s.w * s.h;
    }
}

console.log(area({ kind: 'circle', r: 5 }));

Keyboard shortcuts

Example

// This editor compiles TypeScript in the browser
// using the official TypeScript compiler, then runs the JS.
//
// Type errors are surfaced before the code runs.
const greeting: string = 'Hello, TypeScript!';
console.log(greeting);

Exercise

Test yourself