TypeScript.

TypeScript adds static types to JavaScript, so the compiler catches many bugs before the code runs, not in production. The benefits follow from that:

• A misspelled property or a wrong argument type fails the type check instead of crashing for a user.
• Editors use the types for autocomplete, inline documentation and safe renames.
• Type annotations document what each function takes and returns, and the compiler keeps that documentation accurate.
• Changing a signature makes the compiler list every caller that breaks, so refactoring is safer.
• Interfaces give a team clear contracts between modules.
• You can write modern ECMAScript features, and the compiler can emit older JavaScript for older runtimes.

The cost is a build step and a learning curve. Types also vanish at runtime, so API data still needs checking.

You compile TypeScript with tsc, the TypeScript compiler. It type-checks your .ts files and emits plain .js files that run in any JavaScript environment.

# Install TypeScript globally
npm install -g typescript

# Compile a single file
tsc app.ts

# Compile with watch mode
tsc app.ts --watch

# Compile using tsconfig.json
tsc

Running tsc with no file names finds the nearest tsconfig.json and compiles the whole project with its settings. Naming a file, as in tsc app.ts, compiles just that file with default options. Since TypeScript 6.0 that is an error when a tsconfig.json is present, unless you add --ignoreConfig. Adding --watch recompiles whenever a file changes.

In many projects tsc only type-checks. A bundler such as Vite strips the types and builds the output, and tsc --noEmit runs separately as the type check. Node.js can also run a .ts file directly by stripping its types, but it does no type checking at all.

Type inference means TypeScript works out a type from the code itself, so you don't have to write an annotation. A variable gets the type of its initial value, and a function's return type comes from what it returns.

let message = "Hello"; // TypeScript infers string type
let count = 42; // TypeScript infers number type
let isActive = true; // TypeScript infers boolean type

function add(a: number, b: number) {
  return a + b; // Return type inferred as number
}

Inference keeps code short and still fully typed. Parameters are the main exception. Under strict, a parameter needs an annotation unless it has a default value or gets its type from context, as a callback does.

A let infers a wider type than a const: let x = "a" is string, but const y = "a" is the literal type "a".

Type annotations are explicit types you write after a colon, as in let age: number. They tell TypeScript what type a variable, parameter or return value must have, and the compiler rejects any value that doesn't fit.

// Variable annotations
let username: string = "john";
let age: number = 25;
let isLoggedIn: boolean = false;

// Function parameter and return type annotations
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Array annotations
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

Array types take either form, and string[] means the same as Array<string>.

In practice you annotate function parameters and often return types. You let type inference handle most local variables, because an annotation that repeats an obvious initial value adds nothing.

TypeScript has a type for each of JavaScript's seven primitives, the values that are not objects:

• string for text.
• number for numeric values, integers and floats alike.
• boolean for true and false.
• null for an intentional absence of a value.
• undefined for a value that was never assigned.
• symbol for unique identifiers.
• bigint for integers too large for number.

TypeScript also adds special types that are not primitives. void marks a function that returns nothing, and never marks a value that never occurs. any turns off type checking, and unknown is its type-safe alternative.

Write the lowercase names, because String and Number refer to wrapper objects.

An interface names the shape of an object: which properties and methods it has, and the type of each. Any object with that shape is accepted, whatever created it, because TypeScript compares structure, not names.

interface User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean; // Optional property
  readonly createdAt: Date; // Read-only property
}

const user: User = {
  id: 1,
  name: "John Doe",
  email: "john@example.com",
  createdAt: new Date()
};

A ? marks an optional property, and readonly blocks reassignment after the object is created. Interfaces exist only at compile time and emit no JavaScript. One interface can extend another, and a class uses the implements keyword to promise it has that shape.

Use the extends keyword. The new interface gets every property of the one it extends and adds its own, so a Circle has both color and radius.

interface Shape {
  color: string;
}

interface Circle extends Shape {
  radius: number;
}

// Multiple inheritance
interface TimestampedShape extends Shape, Timestamped {
  area: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

An interface can extend several interfaces at once, separated by commas, as TimestampedShape does. If two parents declare the same property with incompatible types, the compiler reports an error instead of picking one. Declaration order doesn't matter, which is why Timestamped can appear after the interface that uses it.

The alternative is an intersection of type aliases with &. An interface that extends creates one flat type that reports property conflicts. The compiler also caches checks between interfaces, so extends is the better default for object shapes.

An optional property is one an object may leave out. You mark it with ? after the name, and its type becomes the declared type or undefined.

interface Config {
  apiUrl: string;
  timeout?: number; // Optional
  retries?: number; // Optional
  debug?: boolean; // Optional
}

const config: Config = {
  apiUrl: "https://api.example.com"
  // Other properties can be omitted
};

When you read config.timeout, its type is number | undefined, so the compiler makes you handle the missing case. Use ?? to supply a default value, or ?. to read deeper into a property that may be missing.

Function parameters can be optional with the same ?, as long as they come after the required ones.

A readonly property can be set when the object is created, or inside a class constructor, and never reassigned after that. The compiler rejects any later assignment.

interface Point {
  readonly x: number;
  readonly y: number;
}

const point: Point = { x: 10, y: 20 };
// point.x = 30; // Error: Cannot assign to 'x' because it is read-only

// Readonly arrays
const readonlyArray: readonly number[] = [1, 2, 3];
// readonlyArray.push(4); // Error: Property 'push' does not exist

// ReadonlyArray type
const numbers: ReadonlyArray<number> = [1, 2, 3];

For arrays, readonly number[] and ReadonlyArray<number> remove methods that change the array, such as push. Readonly<T> makes every property of a type read-only at once.

The check is compile-time only, and nothing freezes the object at runtime. It is also shallow: a readonly property that holds an object still lets you change that object's fields.

const is different, because it stops a variable from being reassigned, while readonly applies to properties.

You write a class with the class keyword, as in JavaScript, and add types to its fields, constructor parameters and methods. Under strict mode, TypeScript also reports a field that is declared but never set, by an initializer or in the constructor.

class Person {
  private _id: number;
  protected name: string;
  public email: string;

  constructor(id: number, name: string, email: string) {
    this._id = id;
    this.name = name;
    this.email = email;
  }

  public greet(): string {
    return `Hello, I'm ${this.name}`;
  }

  protected getId(): number {
    return this._id;
  }
}

Members can carry the public, protected or private access modifiers, and public is the default.

Parameter properties shorten the common case. constructor(private id: number) {} declares the field and assigns it in one step.

A class can inherit from one base class with extends, and promise to match any number of interfaces with implements.

Access modifiers control where a class member can be used. TypeScript has three, and a member is public unless you say otherwise.

• public members are accessible everywhere.
• private members are accessible only inside the class that declares them.
• protected members are accessible inside the class and its subclasses, but not from outside.

class BankAccount {
  private balance: number;
  protected accountType: string;
  constructor(accountNumber: string, initialBalance: number) {
    this.balance = initialBalance;
    this.accountType = "savings";
  }
}
class PremiumAccount extends BankAccount {
  constructor(accountNumber: string, initialBalance: number) {
    super(accountNumber, initialBalance);
    // this.balance; // Error: private property
    console.log(this.accountType); // OK: protected property
  }
}

The compiler checks the modifiers only at compile time. The emitted JavaScript has ordinary properties, so private data can still be reached at runtime with bracket access or plain JavaScript. For privacy the runtime enforces, use a # private field such as #balance.

A file with a top-level import or export is an ES6 module with its own scope. export makes a name visible to other files, and import brings it in. A file with neither is treated as a global script instead.

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}
export function subtract(a: number, b: number): number {
  return a - b;
}
export default function multiply(a: number, b: number): number {
  return a * b;
}

export const PI = 3.14159;

// app.ts
import multiply, { add, subtract, PI } from './math';
import * as MathUtils from './math';

console.log(add(5, 3)); // 8
console.log(multiply(4, 2)); // 8
console.log(MathUtils.PI); // 3.14159

A module can have any number of named exports, imported in braces. It has at most one default export, imported without braces under any name you choose. import * as MathUtils gathers every named export into one object.

TypeScript adds type-only imports. import type { User } from './types' is removed from the output, so it never loads the module at runtime. The module and moduleResolution settings in tsconfig.json decide which syntax the compiler emits and how it finds ./math.

You handle errors with JavaScript's try and catch. Under strict, TypeScript types the caught value as unknown, because JavaScript can throw anything, not only Error objects. You narrow it before you use it.

function parseNumber(value: string): number {
  try {
    const parsed = parseInt(value);
    if (isNaN(parsed)) {
      throw new Error(`Invalid number: ${value}`);
    }
    return parsed;
  } catch (error) {
    if (error instanceof Error) {
      console.error(error.message);
    }
    throw error;
  }
}
// Custom error types
class ValidationError extends Error {
  constructor(
    message: string,
    public field: string,
    public value: any
  ) {
    super(message);
    this.name = 'ValidationError';
  }
}

The instanceof Error check narrows error, so error.message compiles. The useUnknownInCatchVariables option, part of strict, sets that default. Without it the variable is any, and the compiler checks nothing.

Custom error classes extend Error and add typed fields, like field and value on ValidationError. Setting name makes logs show which error it was. A caller can test err instanceof ValidationError and then read err.field safely.

TypeScript does not track which errors a function throws, so document them, or return a result type for failures callers must handle.

An enum is a named set of constants, such as a set of account statuses. Unlike most TypeScript features, it exists at runtime. The compiler turns it into a real JavaScript object.

enum Status {
  Active = "ACTIVE",
  Disabled = "DISABLED",
}
function setStatus(s: Status) {}
setStatus(Status.Active); // OK
// setStatus("ACTIVE");   // Error: a string is not a Status

type StatusUnion = "ACTIVE" | "DISABLED";
function setStatusUnion(s: StatusUnion) {}
setStatusUnion("ACTIVE"); // OK, and no runtime object exists

Numeric enums count up from 0 and also map values back to names. String enums hold readable values, and they have no reverse mapping.

A union of string literals gives the same compile-time safety with no runtime code, and its values are plain strings. Use an enum when you need a runtime object to iterate over or look values up in.

An array holds any number of values of one type, while a tuple has a fixed length and its own type at each position. So number[] is an array type, and [string, number] is a tuple type.

const scores: number[] = [90, 85, 77]; // any length, all numbers
scores.push(100);                      // fine

const entry: [string, number] = ["alice", 90];
const user = entry[0];                 // string
const score = entry[1];                // number
// const bad: [string, number] = [90, "alice"]; // Error: wrong order

type Point = readonly [x: number, y: number]; // labeled and read-only

Tuples suit small, positional data, such as a function that returns two values. React's useState returns a value and a setter this way. For more than two or three fields, an object type with named properties is clearer.

Labels like x and y document what each position means. An optional element makes a tuple's length vary, and a rest element lets it grow.

A tuple is still an array at runtime, so push can add elements unless the tuple is readonly.

NonNullable<T> removes null and undefined from a type. NonNullable<string | null | undefined> is just string, which is the type a value has after a null check.

type MaybeString = string | null | undefined;
type DefinitelyString = NonNullable<MaybeString>; // string

function processValue(value: string | null | undefined): void {
  if (value !== null && value !== undefined) {
    // Type narrowing
    const processed: NonNullable<typeof value> = value; // string
    console.log(processed.toUpperCase());
  }
}

// Useful with arrays
type ArrayItem<T> = T extends (infer U)[] ? NonNullable<U> : never;
type StringArrayItem = ArrayItem<(string | null)[]>; // string

For a union, it drops the null and undefined members and keeps the rest. Inside a function, NonNullable<typeof value> names the narrowed type of a parameter. The last two lines use it inside a conditional type to clean up an array's element type.

It changes only the type, never the value. To remove nulls from data you still need a runtime check, and NonNullable then describes what is left.