parameter-properties

Require or disallow parameter properties in class constructors.

TypeScript includes a "parameter properties" shorthand for declaring a class constructor parameter and class property in one location. Parameter properties can be confusing to those new to TypeScript as they are less explicit than other ways of declaring and initializing class members.

This rule can be configured to always disallow the use of parameter properties or enforce their usage when possible.

.eslintrc.cjs

module.exports = {
  "rules": {
    "@typescript-eslint/parameter-properties": "error"
  }
};

Try this rule in the playground ↗

Options

This rule accepts the following options:

type Modifier =
  | 'private readonly'
  | 'private'
  | 'protected readonly'
  | 'protected'
  | 'public readonly'
  | 'public'
  | 'readonly';

type Options = [
  {
    /** Whether to allow certain kinds of properties to be ignored. */
    allow?: Modifier[];
    /** Whether to prefer class properties or parameter properties. */
    prefer?:
      | 'parameter-property'
      /** Whether to prefer class properties or parameter properties. */
      | 'class-property';
  },
];

const defaultOptions: Options = [{ allow: [], prefer: 'class-property' }];

This rule, in its default state, does not require any argument and would completely disallow the use of parameter properties. It may take an options object containing either or both of:

• "allow": allowing certain kinds of properties to be ignored
• "prefer": either "class-property" (default) or "parameter-property"

allow

If you would like to ignore certain kinds of properties then you may pass an object containing "allow" as an array of any of the following options:

• allow, an array containing one or more of the allowed modifiers. Valid values are:
  • readonly, allows readonly parameter properties.
  • private, allows private parameter properties.
  • protected, allows protected parameter properties.
  • public, allows public parameter properties.
  • private readonly, allows private readonly parameter properties.
  • protected readonly, allows protected readonly parameter properties.
  • public readonly, allows public readonly parameter properties.

For example, to ignore public properties:

{
  "@typescript-eslint/parameter-properties": [
    true,
    {
      "allow": ["public"]
    }
  ]
}

prefer

By default, the rule prefers class property ("class-property"). You can switch it to instead preferring parameter property with ("parameter-property").

In "parameter-property" mode, the rule will issue a report when:

• A class property and constructor parameter have the same name and type
• The constructor parameter is assigned to the class property at the beginning of the constructor

default

Examples of code for this rule with no options at all:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

Open in Playground

readonly

Examples of code for the { "allow": ["readonly"] } options:

❌ Incorrect

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(readonly name: string) {}
}

Open in Playground

private

Examples of code for the { "allow": ["private"] } options:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

Open in Playground

protected

Examples of code for the { "allow": ["protected"] } options:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

Open in Playground

public

Examples of code for the { "allow": ["public"] } options:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

Open in Playground

private readonly

Examples of code for the { "allow": ["private readonly"] } options:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

Open in Playground

protected readonly

Examples of code for the { "allow": ["protected readonly"] } options:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

Open in Playground

public readonly

Examples of code for the { "allow": ["public readonly"] } options:

❌ Incorrect

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

Open in Playground

✅ Correct

class Foo {
  constructor(name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}

Open in Playground

"parameter-property"

Examples of code for the { "prefer": "parameter-property" } option:

❌ Incorrect

class Foo {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Foo {
  public readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}

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

Open in Playground

✅ Correct

class Foo {
  private differentName: string;
  constructor(name: string) {
    this.differentName = name;
  }
}

class Foo {
  private differentType: number | undefined;
  constructor(differentType: number) {
    this.differentType = differentType;
  }
}

class Foo {
  protected logicInConstructor: string;
  constructor(logicInConstructor: string) {
    console.log('Hello, world!');
    this.logicInConstructor = logicInConstructor;
  }
}

Open in Playground

When Not To Use It

If you don't care about which style of parameter properties in constructors is used in your classes, then you will not need this rule.

However, keep in mind that inconsistent style can harm readability in a project. We recommend picking a single option for this rule that works best for your project.

Resources

• Rule source
• Test source