090 — Classes (Invoice properties, constructor, format, typed arrays)

Video: 090 · TypeScript Tutorial #12 - Classes · watch · ~08:46 · Net Ninja TypeScript tutorial series, lesson 12 (Shaun)

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 05 (objects and interfaces). The Finance Logger finally gets its data model.

properties with types up front

The class opens with three typed declarations: a client string saying who the invoice goes to, a details string, and an amount number.

class Invoice {
	client: string;
	details: string;
	amount: number;
}

the constructor assigns via this

Values arrive through a constructor whose short parameter names (c, d, a) are assigned onto the instance, so each new call passes in all three property values up front.

constructor(c: string, d: string, a: number) {
	this.client = c;
	this.details = d;
	this.amount = a;
}

format turns the data into a sentence

A format method on the class renders each invoice as a readable line, returning a string built from the three properties.

format() {
	return `${this.client} owes $${this.amount} for ${this.details}`;
}

new instances, logged to the console

Instantiation works as in JavaScript — “Well all we’d do is say something like const in one stands for invoice one and set it equal to a new invoice much like we would in JavaScript.”

const invOne = new Invoice("mario", "work on the mario website", 250);
const invTwo = new Invoice("luigi", "work on the luigi website", 300);

a typed array plus public-by-default mutation

The lesson closes with two consequences of the type system. First, an array can admit only invoices: swapping the string[] element type for Invoice means only invoices can be pushed into it.

let invoices: Invoice[] = [];
invoices.push(invOne);
invoices.push(invTwo);

Second, every property is public by default — readable and writable from any instance — so invOne.client = 'yoshi' and invTwo.amount = 400 both compile. That freedom is exactly what the next lesson takes away.

Prev: 089 — The DOM & Type Casting · Next: 091 — Public, Private & Readonly

The auto-transcript is clean on code but loose on naming; this narrative uses the corrected forms: invOne / invTwo for the instances, format() for the method name, and Invoice[] for the typed array. Console object previews render client names in lowercase as logged.