Introduction to TypeScript

TypeScript is a typed superset of JavaScript developed by Microsoft: every valid JavaScript program is also valid TypeScript, but TypeScript adds an optional static type system on top. TypeScript code is never run directly by a browser or Node.js — it is compiled ("transpiled") down to plain JavaScript by the TypeScript compiler (tsc) or a build tool, and it is that resulting JavaScript that actually executes.

The core value proposition is catching a whole category of bugs at compile time — before the code ever runs — that plain JavaScript would only reveal at runtime, often in production, in front of a real user. This single benefit is why TypeScript has become the de facto standard for professional JavaScript codebases, from large frontend applications to backend Node.js services.

Why it matters

TypeScript adds types to JavaScript and checks them before the code runs, which catches misspelled properties, missing arguments and undefined values while you type. Most new front-end and Node.js projects use it, and most job listings for JavaScript roles now ask for it.

Basic Type Annotations

You annotate a variable, parameter, or return value with a colon followed by a type: let age: number = 25; or function greet(name: string): string { ... }. If you later try to assign a value of the wrong type, TypeScript reports an error immediately in your editor, long before you run the code.

• Primitive types: string, number, boolean.
• Array types: number[] or Array<number>.
• any opts out of type checking entirely for that value — useful sparingly, but overusing it defeats the purpose of TypeScript.
• unknown is a safer alternative to any: it forces you to narrow the type before using the value.

Interfaces

An interface describes the expected shape of an object — which properties it must have and what types they are. Interfaces are a purely compile-time construct: they exist to help the type checker (and other developers reading the code) and produce no JavaScript output at all once compiled.

Compile-Time Errors vs. Runtime Errors

In plain JavaScript, passing the wrong shape of object to a function often does not fail immediately — it may silently produce undefined, or throw an exception minutes later deep inside unrelated code, far from the actual mistake. TypeScript's compiler flags the mismatch at the moment you write it, pointing directly at the offending line, which is a dramatically faster and cheaper feedback loop than discovering the same bug in production.

Example

interface User {
  id: number;
  name: string;
  email: string;
}

function sendWelcomeEmail(user: User): string {
  return `Welcome, ${user.name}! A confirmation was sent to ${user.email}.`;
}

const validUser: User = { id: 1, name: 'Asha', email: 'asha@example.com' };
console.log(sendWelcomeEmail(validUser));

// The next line is a compile-time error, caught before running:
// sendWelcomeEmail({ id: 2, name: 'Ravi' });
// Error: Property 'email' is missing in type '{ id: number; name: string; }'
// but required in type 'User'.

Welcome, Asha! A confirmation was sent to asha@example.com.
(The commented-out call fails to compile with: Property 'email' is missing in type '{ id: number; name: string; }' but required in type 'User'.)

Exercise

This exercise is TypeScript, so it needs the TypeScript compiler or an online TypeScript playground; the JavaScript playground here cannot run it. Declare an interface Product with a name that is a string and a price that is a number. Write a function total that takes an array of products and returns a number. Then see what the compiler says about the commented-out call.

Expected result: the program prints 162, and uncommenting the last line gives a compile-time error because price is a string.

// TODO: interface Product

// TODO: function total(items) with type annotations for the parameter and the return value

console.log(total([{ name: "pen", price: 12 }, { name: "book", price: 150 }]));

// console.log(total([{ name: "bag", price: "450" }]));

interface Product {
  name: string;
  price: number;
}

function total(items: Product[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

console.log(total([{ name: "pen", price: 12 }, { name: "book", price: 150 }]));

// console.log(total([{ name: "bag", price: "450" }]));

Quick quiz

Interview questions