091 — Public, Private & Readonly (access control and the constructor shorthand)

Video: 091 · TypeScript Tutorial #13 - Public, Private & Readonly · watch · ~06:05 · Net Ninja TypeScript tutorial series, lesson 13 (Shaun)

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 05 (objects and interfaces). Lesson 12 left every property public — this lesson takes that freedom away, deliberately.

public is the default you already had

The lesson starts where lesson 12 ended: unmodified properties are public — “So that’s the default behavior of classes. All properties are public by default and it’s the same as putting something like public in front of it.”

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

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

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

private locks the door from outside

Marking details private restricts it to the class body — “Now if you want to make something private you can do by saying private in front of it.” Direct invOne.details reads now error, but format() keeps working because it reaches the property through this internally.

class Invoice {
	client: string;
	private details: string;
	public amount: number;
	// ...
}

readonly freezes reassignment everywhere

The third modifier keeps readability but removes writability — “The other access modifier is the readonly one and this means that we can read this from outside and also inside the class itself but we can’t change it.”

class Invoice {
	readonly client: string;
	private details: string;
	public amount: number;
	// ...
}

client stays visible everywhere, but reassignment fails on the instance and even via this inside the class — constructor assignment is the one exception, since initialization is not reassignment.

the shorthand professionals use

The close replaces the whole declaration-plus-assignment ceremony — “Now there is a quicker way to do that so let me just comment out all of this and this is by the way only when you’re using access modifiers in front of the different properties.”

class Invoice {
	constructor(
		readonly client: string,
		private details: string,
		public amount: number,
	) {}

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

Prefixing a parameter with a modifier auto-creates the property and assigns it — bare parameters without a modifier do not become properties. The refactor preserves the page output (mario £250, luigi £300).

Prev: 090 — Classes · Next: 092 — Modules

The auto-transcript is clean on modifiers but loose on identifiers; this narrative uses the corrected forms: readonly (transcript “read only”), Invoice in PascalCase, and format() for the method. The three-modifier shorthand applies only to constructor parameters carrying an access modifier.