How to fix A parameter property cannot be declared using a binding pattern in TypeScript

TypeScriptINTERMEDIATELOW

This TypeScript error occurs when trying to combine parameter properties (like public, private, readonly) with destructuring patterns in constructor parameters. Parameter properties provide shorthand syntax for declaring and initializing class members, but they cannot be used with object or array destructuring patterns.

What this error means

TypeScript parameter properties are a convenient shorthand that allows you to declare and initialize class members directly from constructor parameters by adding modifiers like public, private, protected, or readonly. For example, `constructor(public name: string)` automatically creates a public `name` property. However, TypeScript does not support combining parameter properties with destructuring patterns (also called binding patterns). Destructuring allows you to extract values from objects or arrays directly in parameter lists, like `constructor({ firstName, lastName }: { firstName: string, lastName: string })`. The error "A parameter property cannot be declared using a binding pattern" occurs when you try to use both features together, such as `constructor(public { firstName, lastName }: { firstName: string, lastName: string })`. This syntax is not supported because it creates ambiguity in how the properties should be initialized and accessed.

How to fix "A parameter property cannot be declared using a binding pattern"

1Identify the problematic constructor parameter

Look for constructor parameters that combine modifiers with destructuring patterns:

typescript

// Problematic code - causes TS1187 error
class Person {
  constructor(public { firstName, lastName }: { firstName: string, lastName: string }) {
    // Error: A parameter property cannot be declared using a binding pattern
  }
}

The issue is the public modifier before the destructured object { firstName, lastName }.

2Separate parameter properties from destructuring

Instead of trying to combine both features, handle them separately. Extract the destructured parameters first, then assign them to class properties:

typescript

// Solution 1: Separate destructuring and property assignment
class Person {
  firstName: string;
  lastName: string;

  constructor({ firstName, lastName }: { firstName: string, lastName: string }) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

This approach maintains the destructuring convenience while explicitly declaring and assigning properties.

3Use traditional parameter properties without destructuring

If you don't need destructuring, use standard parameter properties with individual parameters:

typescript

// Solution 2: Traditional parameter properties
class Person {
  constructor(
    public firstName: string,
    public lastName: string
  ) {}
}

// Usage
const person = new Person('John', 'Doe');

This is the most straightforward approach when you have simple parameters.

4Create an interface for the parameter object

For complex objects, define an interface and use it in the constructor:

typescript

// Solution 3: Interface with explicit property declaration
interface PersonData {
  firstName: string;
  lastName: string;
  age?: number;
}

class Person {
  firstName: string;
  lastName: string;
  age?: number;

  constructor(data: PersonData) {
    this.firstName = data.firstName;
    this.lastName = data.lastName;
    this.age = data.age;
  }
}

// Usage with object literal
const person = new Person({ firstName: 'John', lastName: 'Doe', age: 30 });

This approach provides type safety and clear structure for complex parameter objects.

5Consider using a factory method or builder pattern

For very complex initialization scenarios, consider alternative patterns:

typescript

// Solution 4: Factory method
class Person {
  private constructor(
    public firstName: string,
    public lastName: string,
    public age?: number
  ) {}

  static create(data: { firstName: string; lastName: string; age?: number }): Person {
    return new Person(data.firstName, data.lastName, data.age);
  }
}

// Usage
const person = Person.create({ firstName: 'John', lastName: 'Doe', age: 30 });

This pattern separates object construction from the class definition and can handle more complex initialization logic.

How to fix A parameter property cannot be declared using a binding pattern in TypeScript

What this error means

Typical symptoms

Common causes

How to fix "A parameter property cannot be declared using a binding pattern"

Advanced notes

Related errors

Official resources & further reading