Classes

What this module covers

4 steps · TypeScript

1. Step 1. Classes

   Classes are blueprints for creating objects. TypeScript adds access modifiers and strict typing on top of JavaScript classes. class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet(): string { return `Hi, I'm ${this.name}!`; } } Access modifiers: public (accessible from anywhere, the default), private (only inside the class), protected (inside the class and subclasses). Inheritance: class Animal { constructor(public name: string) {} speak(): string { return `${this.name} makes a sound.`; } } class Dog extends Animal { constructor(name: string, public breed: string) { super(name); } speak(): string { return `${this.name} barks!`; } } `public name: string` directly in the constructor parameters is shorthand for declaring and assigning the property in one step.

   Shorthand constructor parameters (`public x: number`) are a TypeScript-only convenience — they declare the property AND assign it from the argument in a single line. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Add a method called distanceFromOrigin that returns a number.

2. Step 2. Quiz: Classes

   Answer these questions about classes.

   class defines a blueprint; public/private/protected control where a member can be accessed from. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Build a Class

   Create a class called Car with public make/model, private year, and a getInfo() method returning "Make Model (Year)".

   Mixing public and private in one constructor is the standard shape for a class that exposes some data and keeps other data as an internal implementation detail. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does Car have public make/model, private year, and a getInfo() method?

4. Step 4. Mini project: Classes

   Create a class called Car with public make/model, private year, and a getInfo() method returning "Make Model (Year)". Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Mixing public and private in one constructor is the standard shape for a class that exposes some data and keeps other data as an internal implementation detail. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does Car have public make/model, private year, and a getInfo() method?