TypeScript is a typed superset of JavaScript developed by Microsoft. It adds optional static types on top of JavaScript syntax, then compiles (transpiles) to plain JavaScript that runs anywhere JS runs — browsers, Node.js, and mobile runtimes.

Why TypeScript?

JavaScript is dynamically typed: a variable can hold any value, and type errors often appear only at runtime. TypeScript catches many of those mistakes during development.

  • Fewer runtime bugs — mismatched types are flagged in the editor
  • Better tooling — autocomplete, go-to-definition, and safe refactors
  • Self-documenting code — types describe the shape of data and APIs
  • Gradual adoption — you can add types file by file in existing JS projects

How It Works

You write .ts files (or .tsx for React). The TypeScript compiler (tsc) checks types and emits .js files. Browsers never run TypeScript directly.

  // greeting.ts
function greet(name: string): string {
    return `Hello, ${name}`;
}

const message = greet('Alice');
console.log(message); // "Hello, Alice"

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

After compilation:

  // greeting.js (simplified output)
function greet(name) {
    return "Hello, ".concat(name);
}
const message = greet('Alice');
console.log(message);

TypeScript vs JavaScript

Feature JavaScript TypeScript
Types Dynamic, checked at runtime Static, checked at compile time
File extension .js .ts / .tsx
Execution Runs directly Compiles to JS first
Syntax ES standard Valid JS + type annotations

Every valid JavaScript program is valid TypeScript. You can rename .js to .ts and add types incrementally.

When to Use TypeScript

TypeScript shines in medium-to-large codebases, team projects, and long-lived applications. Frameworks like Angular use it by default; React and Node.js projects often adopt it for maintainability.

Start with plain JavaScript if you are brand new to programming — then return here once you are comfortable with variables, functions, and objects from JavaScript Basic.

Key Concepts Preview

This course covers the building blocks you will use every day:

  • Basic types — string, number, boolean, arrays, tuples, enums
  • Functions and interfaces — typed parameters, return values, object shapes
  • Classes and generics — OOP patterns and reusable type-safe utilities
  • Advanced types — unions, narrowing, mapped and conditional types
  • Real-world integration — React components and Node.js/Express APIs

Try It Online

Before installing anything locally, experiment at TypeScript Playground. Paste code, see errors instantly, and view compiled output on the right.

A Quick Example

Even a small annotation prevents common mistakes:

  function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

calculateTotal(19.99, 3);   // OK
// calculateTotal('19.99', 3); // Compile error — string is not a number

In the next chapter, we set up tsc, tsconfig.json, and VS Code for local development.