Parameter properties shorthand in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of class with parameter properties shorthand

What is the output of this TypeScript code when compiled to JavaScript and run?

Typescript

class Person {
  constructor(public name: string, private age: number) {}
  greet() {
    return `Hello, my name is ${this.name}`;
  }
}
const p = new Person('Alice', 30);
console.log(p.greet());

A Hello, my name is undefined

B Hello, my name is Alice

C TypeError: p.greet is not a function

D Compilation error due to private modifier

💡 Hint

Remember that parameter properties automatically create and initialize class members.

The constructor parameters with 'public' and 'private' create class properties automatically. The greet method accesses 'this.name' which is set to 'Alice'. So the output is 'Hello, my name is Alice'.

🧠 Conceptual

intermediate

Understanding parameter properties shorthand effect on class members

Which statement about parameter properties shorthand in TypeScript is correct?

A It can only be used with public access modifier.

B It only declares class members but does not initialize them.

C It declares and initializes class members from constructor parameters automatically.

D It requires explicit property declarations outside the constructor.

💡 Hint

Think about what happens when you add 'public' or 'private' before a constructor parameter.

Parameter properties shorthand declares and initializes class members directly from constructor parameters, so you don't need separate property declarations or assignments.

🔧 Debug

advanced

Identify the error in parameter properties usage

What error will this TypeScript code produce?

Typescript

class Car {
  constructor(readonly model: string, speed: number) {}
  getModel() {
    return this.model;
  }
}
const c = new Car('Tesla', 120);
console.log(c.getModel());

A No error, outputs 'Tesla'

B Property 'speed' is not initialized and causes an error

C Cannot use 'readonly' in constructor parameters

D Method getModel is not defined

💡 Hint

Check which constructor parameters become class properties and which do not.

There is no error. The 'readonly model' parameter creates a readonly class property 'model'. The 'speed' parameter lacks an access modifier so it does not create a class property, but since 'speed' is not accessed via 'this.speed', no error occurs. The code outputs 'Tesla'.

📝 Syntax

advanced

Which constructor uses parameter properties shorthand correctly?

Select the constructor that correctly uses parameter properties shorthand to declare and initialize class members.

A constructor(name: string, private age: number) { this.name = name; }

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

C constructor(private name: string, age: number) { this.age = age; }

D constructor(public name: string, private age: number) {}

💡 Hint

Parameter properties shorthand requires access modifiers on parameters and no manual assignments.

Option D uses 'public' and 'private' modifiers on parameters and has an empty constructor body, which is the correct shorthand usage.

🚀 Application

expert

Count class members created by parameter properties shorthand

How many class members are created by this constructor using parameter properties shorthand?

Typescript

class Book {
  constructor(public title: string, private author: string, year: number, readonly pages: number) {}
}

A 3

B 4

C 2

D 1

💡 Hint

Only parameters with access modifiers become class members.

Only 'title' (public), 'author' (private), and 'pages' (readonly) become class members. 'year' has no modifier, so it is just a parameter and not a member.