Classes

Learning objectives#

• Declare typed properties and constructors
• Use parameter properties to cut boilerplate
• Add readonly fields, getters and setters
• Implement interfaces in classes

Explanation#

Class properties must be declared with their types: name: string;. Under strict mode, every property must be initialised in the declaration or the constructor.

Parameter properties: constructor(private name: string) declares and assigns the property in one step. This shorthand is very common in Angular services.

readonly properties can be set only in the declaration or the constructor.

get and set accessors can validate values; TypeScript types them like properties.

implements InterfaceName makes the compiler check the class against a contract.

Syntax#

1class User {
2  constructor(public readonly id: number, public name: string) {}
3  greet(): string { return `Hi ${this.name}`; }
4}

Code example: A typed product class#

1interface Discountable {
2  applyDiscount(percent: number): void;
3}
4

5class Product implements Discountable {
6  private _price: number;
7  readonly createdAt = new Date();
8

9  constructor(
10    public readonly id: number,
11    public name: string,
12    price: number,
13  ) {
14    this._price = price;
15  }
16

17  get price(): number {
18    return this._price;
19  }
20  set price(value: number) {
21    if (value < 0) throw new Error('Price cannot be negative');
22    this._price = value;
23  }
24

25  applyDiscount(percent: number): void {
26    this.price = Math.round(this._price * (1 - percent / 100));
27  }
28}
29

30const p = new Product(1, 'Headphones', 2000);
31p.applyDiscount(10);
32console.log(p.name, p.price);   // Headphones 1800
33p.id = 5;                        // ✗ Cannot assign to 'id' because it is a read-only property
34p._price = 0;                    // ✗ Property '_price' is private and only accessible within class 'Product'
35new Product(2, 'Mouse');         // ✗ Expected 3 arguments, but got 2

Headphones 1800 — and three compile errors for changing the readonly id, touching the private field and calling the constructor with a missing argument.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Product promises to implement Discountable.
2. public readonly id and public name are parameter properties — declared and assigned automatically.
3. price is a normal parameter assigned to the private _price.
4. The price getter/setter validates new values.
5. applyDiscount uses the setter, so validation always runs.
6. TypeScript blocks writes to readonly/private members and wrong constructor calls.

Real-world use case#

Common mistakes#

Best practices#

• Use parameter properties for simple constructors
• Mark ids and creation data readonly
• Keep fields private and expose behaviour through methods
• Implement interfaces so classes are swappable in tests

Remember this#

Practice exercise#

1class BankAccount {
2  private _balance = 0;
3  constructor(public readonly accountNumber: string) {}
4

5  deposit(amount: number): void {
6    if (amount <= 0) throw new Error('Deposit must be positive');
7    this._balance += amount;
8  }
9  get balance(): number {
10    return this._balance;
11  }
12}

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.