Skip to main content

dot-notation

Enforce dot notation whenever possible.

🎨

Extending "plugin:@typescript-eslint/stylistic-type-checked" in an ESLint configuration enables this rule.

🔧

Some problems reported by this rule are automatically fixable by the --fix ESLint command line option.

💭

This rule requires type information to run.

This rule extends the base eslint/dot-notation rule. It adds:

  • Support for optionally ignoring computed private and/or protected member access.
  • Compatibility with TypeScript's noPropertyAccessFromIndexSignature option.

How to Use​

eslint.config.mjs
export default tseslint.config({
  rules: {
    // Note: you must disable the base rule as it can report incorrect errors
    "dot-notation": "off",
    "@typescript-eslint/dot-notation": "error"
  }
});

Try this rule in the playground ↗

Options​

See eslint/dot-notation's options.

This rule adds the following options:

interface Options extends BaseDotNotationOptions {
  allowPrivateClassPropertyAccess?: boolean;
  allowProtectedClassPropertyAccess?: boolean;
  allowIndexSignaturePropertyAccess?: boolean;
}

const defaultOptions: Options = {
  ...baseDotNotationDefaultOptions,
  allowPrivateClassPropertyAccess: false,
  allowProtectedClassPropertyAccess: false,
  allowIndexSignaturePropertyAccess: false,
};

If the TypeScript compiler option noPropertyAccessFromIndexSignature is set to true, then this rule always allows the use of square bracket notation to access properties of types that have a string index signature, even if allowIndexSignaturePropertyAccess is false.

allowPrivateClassPropertyAccess​

Whether to allow accessing class members marked as private with array notation. Default: false.

This can be useful because TypeScript will report a type error on dot notation but not array notation.

Example of a correct code when allowPrivateClassPropertyAccess is set to true:

class X {
  private priv_prop = 123;
}

const x = new X();
x['priv_prop'] = 123;
Open in Playground

allowProtectedClassPropertyAccess​

Whether to allow accessing class members marked as protected with array notation. Default: false.

This can be useful because TypeScript will report a type error on dot notation but not array notation.

Example of a correct code when allowProtectedClassPropertyAccess is set to true:

class X {
  protected protected_prop = 123;
}

const x = new X();
x['protected_prop'] = 123;
Open in Playground

allowIndexSignaturePropertyAccess​

Whether to allow accessing properties matching an index signature with array notation. Default: false.

Example of correct code when allowIndexSignaturePropertyAccess is set to true:

class X {
  [key: string]: number;
}

const x = new X();
x['hello'] = 123;
Open in Playground

If the TypeScript compiler option noPropertyAccessFromIndexSignature is set to true, then the above code is always allowed, even if allowIndexSignaturePropertyAccess is false.

When Not To Use It​

If you specifically want to use both member access kinds for stylistic reasons, or don't wish to enforce one style over the other, you can avoid 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.

Type checked lint rules are more powerful than traditional lint rules, but also require configuring type checked linting.

See Troubleshooting > Linting with Type Information > Performance if you experience performance degradations after enabling type checked rules.

Resources​

Taken with ❤️ from ESLint core.