How to Compile TypeScript to JavaScript Online (Step-by-Step)

TypeScript adds types to JavaScript, but browsers only understand JavaScript. Here's how to compile TypeScript to JavaScript online using PlayCode, with no installation required.

Why TypeScript Needs Compilation

TypeScript is a superset of JavaScript that adds static types. When you write TypeScript code like this:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message: string = greet("World");
console.log(message);

Browsers can't run this directly because they don't understand the : string type annotations. The TypeScript compiler removes these annotations and converts modern syntax to browser-compatible JavaScript:

function greet(name) {
  return "Hello, " + name + "!";
}

var message = greet("World");
console.log(message);

Step 1: Open PlayCode

Go to PlayCode's JavaScript compiler and click "Start Free" to open the editor.

Step 2: Create a TypeScript File

In the file tree on the left, right-click and select "New File". Name it index.ts (the .ts extension tells PlayCode this is TypeScript).

Alternatively, choose the TypeScript template when creating a new project.

Step 3: Write Your TypeScript Code

Write your TypeScript code in the editor. For example:

interface User {
  name: string;
  age: number;
  email?: string; // optional property
}

function createUser(name: string, age: number): User {
  return { name, age };
}

const user = createUser("Alice", 30);
console.log(user);

As you type, PlayCode compiles your TypeScript automatically. You'll see the output in the preview panel immediately.

Step 4: See the Results

The preview panel shows your code running. Open the console tab to see console.log output. TypeScript errors appear inline in the editor with red underlines.

Common TypeScript Compilation Errors

Here are common errors you might encounter and how to fix them:

Type Mismatch

// Error: Type 'number' is not assignable to type 'string'
const name: string = 42;

Fix: Make sure the value matches the declared type.

Missing Property

interface User {
  name: string;
  age: number;
}

// Error: Property 'age' is missing
const user: User = { name: "Alice" };

Fix: Add the missing property or make it optional with ?.

Argument Type Error

function greet(name: string) {
  console.log(`Hello, ${name}`);
}

// Error: Argument of type 'number' is not assignable
greet(42);

Fix: Pass the correct type of argument.

TypeScript Features Supported

PlayCode's TypeScript compiler supports all modern TypeScript features:

• Interfaces and Types: Full type definitions
• Generics: Type parameters for flexible code
• Enums: Named constants
• Decorators: Metadata annotations
• ES2026 features: Latest JavaScript syntax
• JSX/TSX: React component syntax
• Path aliases: Custom import paths

TypeScript with React

PlayCode also compiles TSX (TypeScript + JSX) for React development. Create a .tsx file:

import React from 'react';

interface Props {
  name: string;
  count: number;
}

function Counter({ name, count }: Props) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Tips for TypeScript Development

1. Enable strict mode: PlayCode uses strict TypeScript by default, catching more errors
2. Use the AI assistant: Ask "Convert this JavaScript to TypeScript" or "Add types to this function"
3. Check the console: Runtime errors still appear in the console even if TypeScript compiles
4. Leverage IntelliSense: The editor provides autocomplete based on your types

Try It Now

Ready to compile TypeScript to JavaScript? Open the TypeScript Playground and start coding. No installation, no configuration, just write TypeScript and see it run.

For more advanced JavaScript compilation features, check out our JavaScript Compiler page.