Catch bugs before you run your code by adding a type system on top of JavaScript.
TypeScript is a superset of JavaScript that adds optional static types, compiled ("transpiled") down to plain JavaScript before it runs. The compiler catches type mismatches — like passing a string where a number is expected — before your code ever runs, instead of failing at runtime.
let age: number = 29;
let name: string = "Ada";
let isActive: boolean = true;
// age = "twenty-nine"; // Compile error: string is not assignable to numberAnnotating a function's parameters and return type documents its contract and lets the compiler flag incorrect calls immediately, right in your editor.
function add(a: number, b: number): number {
return a + b;
}
add(2, 3); // OK
// add(2, "3"); // Compile error
An interface (or type) describes the shape of an object: which properties it has and their types. This makes it clear exactly what a function or component expects, and the compiler enforces it everywhere that shape is used.
interface User {
id: number;
name: string;
email?: string; // optional property
}
function greetUser(user: User): string {
return `Hello, ${user.name}!`;
}
A union type (string | number) says a value can be one of several types. Type narrowing — using typeof, instanceof, or equality checks — lets TypeScript figure out exactly which type you're working with inside an if branch.
function formatId(id: string | number): string {
if (typeof id === "number") {
return id.toFixed(0);
}
return id.trim();
}
Generics let a function or type work with any type while still preserving type safety, instead of writing near-duplicate code for every type or giving up and using any. The type parameter (commonly T) is filled in at the call site.
function firstItem(items: T[]): T | undefined {
return items[0];
}
const num = firstItem([1, 2, 3]); // inferred as number
const word = firstItem(["a", "b", "c"]); // inferred as string On top of catching bugs early, typed code gives editors much better autocomplete, makes large refactors safer (the compiler flags every place a changed type breaks), and serves as always-up-to-date documentation of your data shapes — a major reason it's the default choice for most professional JavaScript/React codebases today.