Parameter properties shorthand in Typescript - Step-by-Step Execution

Concept Flow - Parameter properties shorthand

Define class with constructor

↓

Use parameter properties shorthand

↓

Parameters auto become class properties

↓

Create instance with values

↓

Access properties directly

This flow shows how using parameter properties shorthand in a constructor automatically creates and assigns class properties from parameters.

Execution Sample

Typescript

class Person {
  constructor(public name: string, private age: number) {}
}
const p = new Person('Alice', 30);
console.log(p.name);

This code defines a class using parameter properties shorthand, creates an instance, and logs a public property.

Execution Table

Step	Action	Parameter	Property Created	Value Assigned	Output
1	Constructor called	name='Alice', age=30	name (public), age (private)	name='Alice', age=30
2	Instance created		Properties set on instance	name='Alice', age=30
3	Access public property		name	Alice	Alice
4	Try to access private property		age	Error if accessed outside class	Error
5	End				Execution complete

💡 Constructor finishes, instance properties are set, output shows public property value.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
name	undefined	'Alice'	'Alice'	'Alice'
age	undefined	30	30	30
p (instance)	undefined	instance created	instance with properties	instance with properties

Key Moments - 2 Insights

Why can we access p.name but not p.age?

Because 'name' is declared public, it becomes accessible outside the class. 'age' is private, so it cannot be accessed outside, as shown in execution_table step 4.

Does the constructor need to assign parameters to properties manually?

No, parameter properties shorthand automatically creates and assigns properties, so no manual assignment is needed, as seen in step 1.

Visual Quiz - 3 Questions

Look at the execution table, what value does the property 'name' have after step 2?

A 30

B undefined

C 'Alice'

D Error

💡 Hint

Check the 'Property Created' and 'Value Assigned' columns in step 2.

At which step does the instance 'p' get created with properties?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column describing instance creation.

If 'age' was declared public instead of private, what would change in the execution?

A We could access p.age without error.

B Constructor would not assign age.

C Property 'name' would become private.

D No change at all.

💡 Hint

Refer to the explanation about access modifiers in key_moments.

Concept Snapshot

Parameter properties shorthand in TypeScript lets you declare and initialize class properties directly in constructor parameters.
Syntax: constructor(public name: string, private age: number) {}
This saves writing separate property declarations and assignments.
Public properties are accessible outside the class; private are not.
It makes class code shorter and clearer.

Full Transcript

This visual execution trace shows how TypeScript's parameter properties shorthand works. When a class constructor uses access modifiers like public or private in its parameters, TypeScript automatically creates class properties with those names and assigns the passed values. For example, in the Person class, the constructor parameters 'public name' and 'private age' create properties 'name' and 'age' on the instance. When we create an instance with new Person('Alice', 30), the properties are set automatically. Accessing p.name works because it is public, but accessing p.age outside the class causes an error because it is private. This shorthand saves us from writing separate property declarations and assignments inside the constructor. The execution table shows each step: constructor call, instance creation, property access, and error on private property access. The variable tracker shows how 'name' and 'age' get their values. The key moments clarify common confusions about access and assignment. The quiz tests understanding of property values, instance creation, and access modifiers. Overall, parameter properties shorthand is a neat way to write concise and clear class constructors in TypeScript.