Classes in TypeScript

Analogy categoryAnalogies

1. Introduction

A class is a blueprint for creating objects that bundle data (properties) and behavior (methods) together. TypeScript builds on JavaScript's ES2015 class syntax by adding type annotations, access modifiers, and a compile-time type check for every property and method, catching mistakes before the code ever runs.

🏏

Cricket analogy: A Player class is a blueprint bundling data like battingAverage with behavior like bat() — TypeScript adds type checks so a captain can't accidentally assign a bowler's economy rate where a batting average belongs, catching it before the match.

2. Syntax

typescript

class ClassName {
  propertyName: Type;

  constructor(param: Type) {
    this.propertyName = param;
  }

  methodName(): ReturnType {
    // method body
  }
}

const instance = new ClassName(value);

3. Explanation

Every property declared on a class must have a type, either explicit or inferred, and the constructor is responsible for initializing them. TypeScript adds a convenient shorthand called a parameter property: prefixing a constructor parameter with an access modifier such as private, public, or readonly automatically declares a matching field on the class AND assigns the argument to it in one step, removing the need for a separate field declaration plus a manual this.x = x assignment.

🏏

Cricket analogy: Instead of separately declaring battingAverage: number and writing this.battingAverage = avg in the constructor, a parameter property lets you write constructor(private battingAverage: number) — like a scorer who registers and records a player's average in one single entry instead of two.

Class instances are created with the new keyword, which runs the constructor and returns a fully typed object. Method calls, property access, and constructor arguments are all checked against the class's declared types at compile time.

🏏

Cricket analogy: Calling new Player('Kohli', 45) runs the constructor and hands back a fully typed player object, and TypeScript checks at compile time that you passed a name string and a number, not a bat and a helmet by mistake.

The parameter property shorthand constructor(private brand: string, public model: string) {} is equivalent to declaring 'private brand: string; public model: string;' as fields and then writing 'this.brand = brand; this.model = model;' inside the constructor body. It is purely a syntax convenience — the compiled JavaScript behaves identically either way.

4. Example

typescript

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
  }
}

// Parameter property shorthand
class Car {
  constructor(private brand: string, public model: string) {}

  describe(): string {
    return `${this.brand} ${this.model}`;
  }
}

const p = new Person("Ava", 30);
console.log(p.greet());

const c = new Car("Toyota", "Corolla");
console.log(c.describe());
console.log(c.model);

5. Output

text

Hi, I'm Ava and I'm 30 years old.
Toyota Corolla
Corolla

6. Key Takeaways

A class defines a reusable blueprint combining typed properties and methods.
Constructors initialize instance properties and run automatically when 'new' is called.
Parameter property shorthand (e.g. constructor(private x: number)) declares and assigns a field in one step.
All property and method usages are type-checked at compile time.
TypeScript classes compile down to standard JavaScript classes (or ES5 functions depending on the target).

Practice what you learned

1. What does the parameter property shorthand `constructor(private brand: string)` do?

2. In the Person class example, what does p.greet() return?

3. How is a new instance of a TypeScript class created?

4. What happens to TypeScript's class type annotations after compilation to JavaScript?

5. Given `class Car { constructor(private brand: string, public model: string) {} }`, which property can be accessed from outside the class as `car.brand`?

Was this page helpful?

Access Modifiers in TypeScript (public, private, protected)