TypeScript Class: Fields, Methods, Getters and Implements

A TypeScript class is a JavaScript class with types: each field is declared with its type in the class body, and methods and the constructor get typed parameters and return values.

class Account {
    owner: string;
    balance = 0; // type inferred as number

    constructor(owner: string) {
        this.owner = owner;
    }

    deposit(amount: number): number {
        this.balance += amount;
        return this.balance;
    }
}

const acc = new Account("Ada");
acc.deposit(50);
console.log(acc.deposit(25)); // 75
console.log(acc); // Account { owner: 'Ada', balance: 75 }

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
acc.deposit("10");

The compiled output is an ordinary JavaScript class with the types removed, so everything from JavaScript classes still applies. What TypeScript adds happens at compile time: the last call is rejected before the program runs.

Declaring Fields

A field needs a declaration in the class body before the constructor can assign it. Assigning this.owner without declaring owner is error TS2339 (property does not exist). A field with an initializer gets its type inferred from the value, just like a variable.

With strict on, strictPropertyInitialization checks that every non-optional field gets a value. This class forgets two:

// This does not compile: two fields are never assigned.
class Profile {
    name: string;
    age: number;
    city = "Paris";
}

console.log(new Profile());

The compiler reports both:

index.ts(3,5): error TS2564: Property 'name' has no initializer and is not definitely assigned in the constructor.
index.ts(4,5): error TS2564: Property 'age' has no initializer and is not definitely assigned in the constructor.

The check exists because without it new Profile().name.toUpperCase() would type-check and then crash with undefined. Fix each field one of four ways: give it an initializer, assign it in the constructor, mark it optional with ?, or write name!: string when a framework or an init() method sets it later. The last one turns the check off for that field, so use it sparingly.

Methods and this

Methods are typed like functions. Inside a method, this has the type of the instance. A method can return this to allow chaining, and the return type follows subclasses automatically.

class QueryBuilder {
    private parts: string[] = [];

    where(condition: string): this {
        this.parts.push(condition);
        return this;
    }

    build(): string {
        return this.parts.join(" AND ");
    }
}

const sql = new QueryBuilder().where("age > 18").where("active = 1").build();
console.log(sql); // age > 18 AND active = 1

A method loses its this when you pull it off the object, a classic JavaScript bug. TypeScript does not catch that by default, but it does if the method declares a this parameter. That parameter is erased from the output and only guards the call site:

class Timer {
    seconds = 3;

    describe(this: Timer): string {
        return `${this.seconds}s`;
    }

    // An arrow function field keeps `this` bound to the instance.
    describeBound = (): string => `${this.seconds}s`;
}

const t = new Timer();
const bound = t.describeBound;
console.log(bound()); // 3s

const loose = t.describe;
try {
    // @ts-expect-error: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Timer'.
    loose();
} catch (e) {
    // Without the check, this is what happens at runtime:
    if (e instanceof Error) console.log(e.message); // Cannot read properties of undefined (reading 'seconds')
}

The arrow field works because each instance gets its own function that closes over this. The cost is one function per instance instead of one shared method on the prototype.

Getters and Setters

get and set accessors look like properties from the outside. A getter with no setter is read only: assigning to it is a compile error (TS2540).

class Temperature {
    private celsius = 0;

    get fahrenheit(): number {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value: number) {
        if (value < -459.67) throw new RangeError("below absolute zero");
        this.celsius = (value - 32) * 5 / 9;
    }

    get kelvin(): number {
        return this.celsius + 273.15;
    }
}

const temp = new Temperature();
temp.fahrenheit = 212;
console.log(temp.fahrenheit, temp.kelvin); // 212 373.15

try {
    // @ts-expect-error: Cannot assign to 'kelvin' because it is a read-only property.
    temp.kelvin = 0;
} catch (e) {
    if (e instanceof Error) console.log(e.message); // Cannot set property kelvin of #<Temperature> which has only a getter
}

The compiler rejects the assignment, and if the check is bypassed the runtime throws a TypeError too, because the compiled file runs in strict mode (the compiler emits "use strict" at the top). The RangeError in the setter is a runtime check you wrote yourself. The type number only says the value is a number; it knows nothing about ranges.

Static Members

static fields and methods belong to the class itself. You reach them through the class name, not through an instance. A static { } block runs once when the class is defined.

class IdGenerator {
    static prefix = "user";
    private static next = 1;

    static create(): string {
        return `${IdGenerator.prefix}-${IdGenerator.next++}`;
    }

    static {
        IdGenerator.prefix = "u";
    }
}

console.log(IdGenerator.create()); // u-1
console.log(IdGenerator.create()); // u-2

Static members cannot use the class's type parameters: in class Box<T>, a static empty: T is error TS2302, because there is only one static field, shared by every Box<string>, Box<number> and so on.

Implementing an Interface

implements asks the compiler to check that the class has everything an interface requires. A missing member is error TS2420: Class 'X' incorrectly implements interface 'Y'.

interface Shape {
    name: string;
    area(): number;
}

class Circle implements Shape {
    name = "circle";
    constructor(private radius: number) {}

    area(): number {
        return Math.PI * this.radius ** 2;
    }
}

class Square implements Shape {
    name = "square";
    constructor(private side: number) {}

    area(): number {
        return this.side ** 2;
    }
}

const shapes: Shape[] = [new Circle(1), new Square(3)];
for (const s of shapes) console.log(s.name, s.area().toFixed(2));

A class can implement several interfaces: class Doc implements Printable, Serializable. Two things implements does not do. It does not type the class's method parameters for you: check(s) { ... } inside a class that implements check(s: string): boolean is still error TS7006 (Parameter 's' implicitly has an 'any' type), so annotate them. And it leaves no trace at runtime, so obj instanceof Shape is not possible.

The private radius in the constructor is a parameter property: it declares and assigns the field in one step. See constructors.

A Class Is Also a Type

A class declaration creates two things with one name: a value (the constructor function you call with new) and a type (the shape of an instance). Because TypeScript compares types by structure, any object with the same public members fits the type, even one not made by the class.

class Point {
    constructor(public x: number, public y: number) {}
}

function distance(p: Point): number {
    return Math.hypot(p.x, p.y);
}

console.log(distance(new Point(3, 4))); // 5
console.log(distance({ x: 6, y: 8 }));  // 10: a plain object with the same shape

// typeof Point is the type of the constructor itself
function make(ctor: typeof Point): Point {
    return new ctor(1, 1);
}
console.log(make(Point)); // Point { x: 1, y: 1 }

The plain object passes the type check but is not a Point at runtime: ({ x: 6, y: 8 }) instanceof Point is false. A class with a private or #private member stops this: only instances of that class (or its subclasses) are assignable to it.

Common Mistakes

• Declaring a field and never assigning it. TS2564 is telling you the field would be undefined. Initialize it rather than silencing it with !.
• Passing a method as a callback. button.onclick = obj.handle loses this. Use an arrow function field or obj.handle.bind(obj).
• Expecting implements to add code or types. It only checks. Parameter types still need annotations.
• Using instanceof with an interface. Interfaces do not exist at runtime; check a class or use a type guard.
• Assuming types validate data. A number field accepts any number at compile time and anything at all from untyped data at runtime.