Issue with noUnusedLocals flag detection within function* block

Question

Issue with noUnusedLocals flag detection within function* block

Compiler options: "noUnusedLocals": true, "noUnusedParameters": true, are not functioning properly within functions. An error is encountered in the following example:

export class AllReduxSagas {

[ts] Property 'someService' is declared but its value is never read.

    constructor(private someService: SomeService) {} 

      watchSaga = function* watchSaga() {
        yield takeEvery(ACTION_TYPE.SOME_ACTION, this.someSaga, this.someService);
      };
...
}

The compiler does not recognize 'someService', however, everything works fine when the compiler options mentioned above are removed. What causes this issue, and how can it be resolved?

angular typescript visual-studio-code redux-saga

Answer 1

Answer №1

The issue here is that watchSaga is not a method of the class; it's actually a field with a function value. As a result, the this keyword inside the watchSaga function may not refer to the containing class as expected (this will have a type of any within the function).

You might want to consider converting the function into a class method:

export class AllReduxSagas {
    constructor(private someService: SomeService) { }

    *watchSaga() {
        yield this.someService;
    };
}

Alternatively, if you prefer to keep using the field with a function type syntax for any specific reason, you can explicitly define the type of this (although this won't guarantee that the passed this will be an instance of the class since it's still a regular function, not an => arrow function)

watchSaga = function* watchSaga(this: AllReduxSagas) {
    yield this.someService;
};

Answer 2

The issue here is that watchSaga is not a method of the class; it's actually a field with a function value. As a result, the this keyword inside the watchSaga function may not refer to the containing class as expected (this will have a type of any within the function).

You might want to consider converting the function into a class method:

export class AllReduxSagas {
    constructor(private someService: SomeService) { }

    *watchSaga() {
        yield this.someService;
    };
}

Alternatively, if you prefer to keep using the field with a function type syntax for any specific reason, you can explicitly define the type of this (although this won't guarantee that the passed this will be an instance of the class since it's still a regular function, not an => arrow function)

watchSaga = function* watchSaga(this: AllReduxSagas) {
    yield this.someService;
};

Issue with noUnusedLocals flag detection within function* block

Answer №1

Similar questions

Is there a way to utilize Typescript enum types for conditional type checking?

Find the element that is being scrolled in order to delete its attributes

Issue with PrimeNG overlaypanel displaying error message "Functionality of this.engine.setProperty is not available"

Tips for resolving an Angular 504 Error Response originating from the backend layer

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

Loading dynamic content within Angular Material tabs allows for a more customized and interactive user experience

The HTML button triggers a function to execute on a different webpage when clicked

Hide Decimal Places with Angular Pipe

What is the method for utilizing data binding to modify a portion of a class name string with an ISO country code of your choice

Is Angular4 preloaded with bootstrap library?

Transform Promise-based code to use async/await

What is the method for passing a variable in VSCode?

What could be causing input to be blocked in certain situations while using my Angular directive with compile function?

Implementing the click event in angular2-openlayers will display the information for the selected marker

TypeScript conditional return type: effective for single condition but not for multiple conditions

Setting innerHTML does not affect the content of an SVG element

Exploring the utilization of an interface or class in Typescript

leveraging jQuery across an Angular 2 application as a global tool

Creating a custom directive in Angular that dynamically applies attributes based on the current route

There are several InputBase elements nested within a FormControl