Parameter Properties

Parameter properties are a TypeScript syntactic shorthand that allows you to declare and initialize class member fields directly within a constructor’s signature. By prefixing a constructor parameter with an access modifier (public, private, protected) or the readonly keyword, the TypeScript compiler implicitly declares a class property of the same name and automatically assigns the parameter’s value to that property upon instantiation.

Syntax Comparison

Without parameter properties, declaring and initializing a class field requires three distinct steps: property declaration, constructor parameter definition, and explicit assignment.

class ExplicitClass {
    public readonly id: number;
    private name: string;

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

Using parameter properties, the declaration and assignment are condensed into the constructor signature:

class ParameterPropertyClass {
    constructor(public readonly id: number, private name: string) {
        // The compiler automatically generates:
        // this.id = id;
        // this.name = name;
    }
}

Technical Mechanics

1. Required Modifiers: A parameter is only treated as a parameter property if it is prefixed with at least one of the following modifiers: public, private, protected, or readonly. If no modifier is present, it remains a standard local constructor parameter.
2. Execution Order: The implicit assignment of parameter properties occurs before any code within the constructor body is executed. If a class inherits from a base class, the assignment occurs immediately after the super() call.
3. Combination with Default Values: Parameter properties fully support default parameter values. If a default value is provided and the argument is omitted during instantiation, the class property is initialized with the default value.

class Configuration {
    constructor(
        protected environment: string = "development",
        public readonly timeoutMs: number = 3000
    ) {}
}

JavaScript Emission

During compilation, TypeScript strips the type annotations and access modifiers, emitting standard JavaScript assignment logic within the constructor.

The following TypeScript code:

class User {
    constructor(private username: string) {}
}

Compiles to the following JavaScript (ES2015+):

class User {
    constructor(username) {
        this.username = username;
    }
}

Master TypeScript with Deep Grasping Methodology!

Learn More