setter and getter of same property evokes eslint signatures should be adjecent error

user_9095988 0
Viewed 6116

I created a class (web-component) in which I declared two setters and getters one for expressionValue second for scoreValue. Now I am getting those errors:

All 'expressionValue' signatures should be adjacent @typescript-eslint/adjacent-overload-signatures

All 'scoreValue' signatures should be adjacent @typescript-eslint/adjacent-overload-signatures

And I am wondering how can I fix this error to keep my setters and getters. Or it is impossible, and only one way to achieve this is to set this @typescript-eslint/adjacent-overload-signatures: 0 in .eslintrc.js file ?

class BinaryExpressionItem extends KKWebComponent implements KKBinaryExpressionItem {
    public static TAG: string = `${CONSTANTS.TAG_PREFIX}-binary-expression-tem`;

    private readonly expression: HTMLElement = <HTMLElement>this.shadowRoot.querySelector('var');
    private readonly score: HTMLElement = <HTMLElement>this.shadowRoot.querySelector('mark');

    constructor() {
        super(template);
    }

    set expressionValue(value: string) {
        this.expression.textContent = value;
    }

    set scoreValue(value: string) {
        this.score.textContent = value;
    }

    get expressionValue(): string {
        return this.expression.textContent ?? '';
    }

    get scoreValue(): string {
        return this.score.textContent ?? '';
    }
}
eslint typescript
1 Answers

The key word here is adjacent. So you need to put the get and set for the same property next to each other:

class BinaryExpressionItem extends KKWebComponent implements KKBinaryExpressionItem {
    public static TAG: string = `${CONSTANTS.TAG_PREFIX}-binary-expression-tem`;

    private readonly expression: HTMLElement = <HTMLElement>this.shadowRoot.querySelector('var');
    private readonly score: HTMLElement = <HTMLElement>this.shadowRoot.querySelector('mark');

    constructor() {
        super(template);
    }

    get expressionValue(): string {                // The ones for expressionValue
        return this.expression.textContent ?? '';  // The ones for expressionValue
    }                                              // The ones for expressionValue
                                                   // The ones for expressionValue
    set expressionValue(value: string) {           // The ones for expressionValue
        this.expression.textContent = value;       // The ones for expressionValue
    }                                              // The ones for expressionValue

    get scoreValue(): string {                     // The ones for scoreValue
        return this.score.textContent ?? '';       // The ones for scoreValue
    }                                              // The ones for scoreValue
                                                   // The ones for scoreValue
    set scoreValue(value: string) {                // The ones for scoreValue
        this.score.textContent = value;            // The ones for scoreValue
    }                                              // The ones for scoreValue
}

I've always listed the getter first, then the setter, but I don't think ESLint cares, as long as the two parts of the property are next to each other.

user_1572470
Related