Class Syntax: Members, Constructors, Methods

"TypeScript classes are JavaScript classes with type checking. Same syntax, more guarantees."

The basic shape

A TypeScript class declaration is JavaScript class syntax with type annotations on fields, parameters, and return types. Class fields are declared with names and types; the constructor initializes them; methods read and modify the fields; the class instance shape carries all of this through the type system.

class Counter {
  count: number = 0;
  increment(): void { this.count++ }
  reset(): void { this.count = 0 }
}

The count: number = 0 is field declaration plus initialization. The methods access this.count — TypeScript knows this is a Counter inside the methods, so the type is preserved.

Class instance type

A class declaration creates both a constructor (the value Counter) and a type (the type Counter). const c: Counter = new Counter() uses the type; new Counter() calls the constructor. The two share the same name and most TypeScript code mixes them freely.

Getters and setters

Class methods can use get and set keywords to make property-like accessors. get name(): string declares a getter; reading instance.name calls it. set name(v: string) declares a setter; assigning to instance.name = '...' calls it. From outside the class, the accessor looks like a property; inside, it's two methods.

Classes work best when you have behavior + state coupled together with multiple instances. For pure value shapes, use interfaces. For one-off objects, use object literals. Classes shine when you need both data and methods on many instances.

Code

Class basics — fields, constructor, methods, accessors·typescript

class User {
  name: string;
  email: string;
  active: boolean = true;

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

  greet(): string {
    return `Hi, ${this.name}`;
  }

  // Getter
  get isActive(): boolean {
    return this.active;
  }

  // Setter
  set isActive(v: boolean) {
    this.active = v;
    console.log(`active changed to ${v}`);
  }
}

const u = new User('Pippa', 'pippa@example.com');
u.greet();              // 'Hi, Pippa'
u.isActive;             // true (via getter)
u.isActive = false;     // setter logs 'active changed to false'

Exercise

Write a Stopwatch class with start(), stop(), and reset() methods and a get elapsed(): number accessor. Track start time internally. Confirm the type system tracks the class instance type through method chains.

Hint

Field private _start: number | null = null. Methods set/read _start. The getter computes Date.now() - this._start when started, or 0 when not.

Class Syntax: Members, Constructors, Methods

The basic shape

Class instance type

Getters and setters

Code

External links

Exercise

Progress

Comments 0