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.

Practice

1. What does the parameter properties shorthand in TypeScript do inside a class constructor?

easy

A. It automatically generates getter and setter methods.

B. It declares global variables outside the class.

C. It creates and assigns class properties in one step using access modifiers.

D. It imports external modules into the class.

Solution

1. Step 1: Understand parameter properties shorthand

   Parameter properties shorthand uses access modifiers like public, private, or protected before constructor parameters to create and assign class properties automatically.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated features: global variables, getter/setter methods, and module imports, which are not related to parameter properties shorthand.

3. Final Answer:

   It creates and assigns class properties in one step using access modifiers. -> Option C

4. Quick Check:

   Parameter properties shorthand = create and assign properties [OK]

Hint: Look for access modifiers before constructor parameters [OK]

Common Mistakes:

• Confusing shorthand with getter/setter methods
• Thinking it declares global variables
• Assuming it imports modules

2. Which of the following is the correct syntax to use parameter properties shorthand in a TypeScript class constructor?

easy

A. constructor(public name: string) { }

B. constructor(name: string) { this.name = name; }

C. constructor(private name) { this.name = name; }

D. constructor(name: string public) { }

Solution

1. Step 1: Identify correct parameter properties syntax

   The correct syntax places an access modifier (public, private, protected) before the parameter name and type inside the constructor, like constructor(public name: string) { }.

2. Step 2: Check other options for errors

   constructor(name: string) { this.name = name; } lacks shorthand (no access modifier). constructor(private name) { this.name = name; } misses the type annotation. constructor(name: string public) { } has incorrect modifier placement after the type.

3. Final Answer:

   constructor(public name: string) { } -> Option A

4. Quick Check:

   Access modifier before parameter = correct syntax [OK]

Hint: Access modifier must come before parameter name and type [OK]

Common Mistakes:

• Placing access modifier after type
• Omitting type annotation
• Not using access modifier at all

3. What will be the output of this TypeScript code?

class Person {
  constructor(private name: string) {}
  greet() {
    return `Hello, ${this.name}!`;
  }
}
const p = new Person('Anna');
console.log(p.greet());

medium

A. Hello, !

B. Hello, undefined!

C. Error: Property 'name' does not exist

D. Hello, Anna!

Solution

1. Step 1: Understand private parameter property

   The constructor uses private name: string, which creates and assigns a private property name automatically.

2. Step 2: Check greet method output

   The greet() method accesses this.name and returns "Hello, Anna!" because the property was set correctly.

3. Final Answer:

   Hello, Anna! -> Option D

4. Quick Check:

   Private property set by constructor = correct output [OK]

Hint: Private properties set by constructor are accessible inside class [OK]

Common Mistakes:

• Assuming private means inaccessible inside class
• Expecting undefined because no explicit assignment
• Confusing property with parameter

4. Identify the error in this TypeScript class using parameter properties shorthand:

class Car {
  constructor(public model) {}
}
const c = new Car('Tesla');
console.log(c.model);

medium

A. Property 'model' is not accessible outside the class.

B. Missing type annotation for parameter 'model'.

C. Cannot use public modifier in constructor.

D. Constructor must have a return type.

Solution

1. Step 1: Check parameter properties syntax

   The constructor parameter model uses public but lacks a type annotation, which is required in TypeScript.

2. Step 2: Verify other options

   Cannot use public modifier in constructor. is wrong because public modifier is allowed. Property 'model' is not accessible outside the class. is wrong because public makes property accessible. Constructor must have a return type. is wrong because constructors do not have return types.

3. Final Answer:

   Missing type annotation for parameter 'model'. -> Option B

4. Quick Check:

   Parameter properties require type annotations [OK]

Hint: Always add type after parameter in constructor shorthand [OK]

Common Mistakes:

• Omitting type annotation
• Thinking public is invalid in constructor
• Expecting constructor to have return type

5. You want to create a TypeScript class Book that stores title and author as public properties using parameter properties shorthand. Which code correctly implements this and allows creating a Book instance with both properties set?

hard

A. class Book {
constructor(public title: string, public author: string) {}
}

B. class Book {
constructor(public title: string, author: string) {}
}

C. class Book {
constructor(title: string, author: string) {
this.title = title;
this.author = author;
}
}

D. class Book {
constructor(title: string, public author: string) {}
}

Solution

1. Step 1: Identify correct use of parameter properties shorthand

   Both title and author must have access modifiers (public) before their parameters to create public properties automatically.

2. Step 2: Evaluate each option

   class Book { constructor(public title: string, author: string) {} } only makes title public; author is just a parameter, not a property. class Book { constructor(public title: string, public author: string) {} } correctly uses public for both. class Book { constructor(title: string, author: string) { this.title = title; this.author = author; } } does not use shorthand but tries to assign properties without declaring them, causing errors. class Book { constructor(title: string, public author: string) {} } only makes author public, title is missing.

3. Final Answer:

   class Book { constructor(public title: string, public author: string) {} } -> Option A

4. Quick Check:

   Use public before all parameters to create properties [OK]

Hint: Add public before every parameter to create properties [OK]

Common Mistakes:

• Adding public to only some parameters
• Assigning properties without declaring them
• Mixing shorthand with manual assignments incorrectly