Command Palette

Search for a command to run...

Hectal
Phase 6Intermediate7 of 18 in TypeScript

Classes and Object-Oriented TypeScript

Typed classes, private and protected members, inheritance and override, abstract classes, implements, static members, accessors, this types and decorators.

A class is a blueprint for making many objects that share the same fields and behaviour. JavaScript has had classes since 2015; TypeScript adds the part JavaScript cannot have: a checker that knows exactly which fields each object has, which are secret, and which methods a child class may replace.

This phase goes from the first typed class to the full toolbox: constructors and strictPropertyInitialization, public, private, protected and #private (and what each really does at runtime), readonly and parameter properties, extends and override, abstract classes, implements, static members, getters and setters, the accessor keyword, this types for fluent APIs, and decorators.

Every example is checked by the real compiler in your browser. Predict the error, then look at the Types panel; the Console shows what really runs, including the places where TypeScript's rules are only a promise made before the code runs.

0/8 · 0%
8 topics ~3 h 37 code blocks & diagrams
Start with the first topic
1
6.1

Classes with Types

A class is a blueprint that builds many objects with the same typed fields and methods. TypeScript checks that every field is declared, that every field is given a value before the object is used, and that every method is called with the right arguments.

22 min 5 code practice

2
6.2

public, private, protected and #private

Access modifiers decide who may touch a field or method. TypeScript's private and protected are checked only while compiling and vanish at runtime; JavaScript's #private is enforced for real. readonly and parameter properties cut boilerplate.

22 min 4 code practice

3
6.3

Inheritance and override

A subclass extends a parent class and gets its fields and methods for free, then adds or replaces some. TypeScript checks that every replacement still fits the parent's promise, and the override keyword makes replacing explicit.

21 min 5 code practice

4
6.4

Abstract Classes

An abstract class is a half-finished blueprint: it fixes the steps and shares the finished parts, but leaves some members abstract for each subclass to fill in. You cannot build an object from it directly, and the compiler makes sure every subclass completes it.

20 min 3 code practice

5
6.5

Implementing Interfaces

implements asks the compiler to check that a class has everything an interface requires. It adds nothing to the class and gives it no types for free, and because TypeScript compares shapes, a class does not even need to say implements to fit an interface.

20 min 5 code practice

6
6.6

Static Members, Getters/Setters and accessor

static members belong to the class itself and not to its objects. Getters and setters make a method look like a field, and the accessor keyword creates a field with a hidden getter and setter that decorators can hook into.

21 min 4 code practice

7
6.7

this Types and Fluent APIs

Inside a class, the type this means "the exact class of the object this method was called on, including subclasses". It lets a method return its own object so calls chain (a.add().tag().build()) without losing the subclass, and it lets methods narrow this with this is T.

20 min 4 code practice

8
6.8

Decorators

A decorator is a function written as @name above a class or one of its members. It runs once when the class is defined and can watch, wrap or replace what it decorates. TypeScript 5.0 supports the standard ECMAScript decorators, and the older experimentalDecorators still powers Angular and NestJS.

23 min 7 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Build a Playlist Class

The class Playlist declares two fields but never sets them, so strict mode complains, and the code at the bottom calls methods that do not exist yet.

Beginner
2

Hide the Balance

Wallet lets any code change balance directly. Make it private so only the wallet's own methods can touch it.

Beginner
3

Finish the Abstract Shapes

Shape is an abstract class: describe() is finished and calls area(), which each subclass must provide. Rectangle and Circle forgot theirs, so the compiler complains.

Intermediate
4

Two Loggers, One Contract

The Logger interface and the run function are written. Write two classes that implement Logger: MemoryLogger, which stores every message in a public lines array, and PrefixLogger, which takes a prefix in its constructor and prints prefix + message with console.log.

Intermediate
5

A Fluent Email Builder

EmailBuilder has chainable methods and a subclass HtmlEmailBuilder adds bold. The chain new HtmlEmailBuilder().to(...).subject(...).bold(...) fails, because to and subject return the parent type, which forgets bold.

Intermediate
6

Write a Method Decorator

counted is a standard method decorator that should count how many times each decorated method is called, in the calls object, while still returning the method's result.

Advanced