Skip to main content

class-literal-property-style

Enforce that literals on classes are exposed in a consistent style.

🎨

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

💡

Some problems reported by this rule are manually fixable by editor suggestions.

Some TypeScript applications store literal values on classes using fields with the readonly modifier to prevent them from being reassigned. When writing TypeScript libraries that could be used by JavaScript users, however, it's typically safer to expose these literals using getters, since the readonly modifier is enforced at compile type.

This rule aims to ensure that literals exposed by classes are done so consistently, in one of the two style described above. By default this rule prefers the fields style as it means JS doesn't have to setup & teardown a function closure.

eslint.config.mjs
export default tseslint.config({
  rules: {
    "@typescript-eslint/class-literal-property-style": "error"
  }
});

Try this rule in the playground ↗

Options​

This rule accepts the following options:

type Options = [
  /** Which literal class member syntax to prefer. */
  | 'getters'
  /** Which literal class member syntax to prefer. */
  | 'fields',
];

const defaultOptions: Options = ['fields'];
note

This rule only checks for constant literal values (string, template string, number, bigint, boolean, regexp, null). It does not check objects or arrays, because a readonly field behaves differently to a getter in those cases. It also does not check functions, as it is a common pattern to use readonly fields with arrow function values as auto-bound methods. This is because these types can be mutated and carry with them more complex implications about their usage.

"fields"​

This style checks for any getter methods that return literal values, and requires them to be defined using fields with the readonly modifier instead.

Examples of code with the fields style:

class Mx {
  public static get myField1() {
    return 1;
  }

  private get ['myField2']() {
    return 'hello world';
  }
}
Open in Playground

"getters"​

This style checks for any readonly fields that are assigned literal values, and requires them to be defined as getters instead. This style pairs well with the @typescript-eslint/prefer-readonly rule, as it will identify fields that can be readonly, and thus should be made into getters.

Examples of code with the getters style:

class Mx {
  readonly myField1 = 1;
  readonly myField2 = `hello world`;
  private readonly myField3 = 'hello world';
}
Open in Playground

When Not To Use It​

When you have no strong preference, or do not wish to enforce a particular style for how literal values are exposed by your classes.

Resources​