Parameter Properties

Shorthand for class property assignment.

TypeScript2 min readConcept 43 of 54

Constructor Shorthand

TypeScript offers a shorthand for declaring a class property and assigning a constructor argument to it in a single step.

By adding a visibility modifier (public, private, protected) or readonly to a constructor argument, TypeScript automatically creates the property and assigns it for you.

Killing Boilerplate

In standard JavaScript or older object-oriented languages, you have to write the property name three times: once to declare it, once in the constructor arguments, and once to assign it (this.x = x).

Parameter properties reduce this to a single, clean declaration.

Syntax

typescript // ❌ The old, verbose way class PointVerbose { public x: number; public y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } } // ✅ The modern, shorthand way class PointShorthand { constructor(public x: number, public y: number) {} }

Try it

Compare the verbose standard class declaration against the clean parameter property shorthand.

// 1. The Verbose Way
class PointVerbose {
public x: number;
public y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
The Shorthand Equivalent
Modern
class PointShorthand {
constructor(
publicx: number,
publicy: number
) {}
}
Wait, where are the fields?
Adding an access modifier (public, private, protected, or readonly) automatically triggers the shorthand.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which of these constructor arguments will automatically create a class property?

Remember this

  • Prefix constructor args with public, private, protected, or readonly.
  • This automatically declares and assigns the property (this.prop = prop).
  • It removes boilerplate but can make the top of the class look deceivingly empty.

Done with this concept?

Mark it complete to track your progress. No login needed.