ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

Question

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

I'm encountering an issue with my Typescript code where I am destructuring an object to extract a partial object, but it's failing the linter check. Here is the problematic code snippet:

async someFunction(username: string): Promise<UserDTO> {
    const userEntity = await getUserByUsernameAsync(username);

    if (userEntity ) {
        const { password, ...result } = userEntity ;
        return result;
    }

    return null;
}

The code above removes certain parts of an object and returns the remaining data. However, when running the linter, I receive this warning:

warning  'password' is assigned a value but never used      @typescript-eslint/no-unused-vars

The issue lies in assigning password to a variable that is not being utilized. How can I rectify this problem to satisfy the linter?

javascript typescript eslint typescript-eslint

Answer 1

Answer №1

To prevent verification for additional siblings, you have the option to include

"@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]

in your set of rules within eslintrc.js.

For instance:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: [
    "@typescript-eslint",
  ],
  extends: [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
  },
  settings: {
    react: {
      version: "detect"
    }
  }
};

If needed, you can simply disable the linting rule entirely for that line by incorporating this into the line above it:

// eslint-disable-next-line @typescript-eslint/no-unused-vars

Answer 2

To prevent verification for additional siblings, you have the option to include

"@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]

in your set of rules within eslintrc.js.

For instance:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: [
    "@typescript-eslint",
  ],
  extends: [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
  },
  settings: {
    react: {
      version: "detect"
    }
  }
};

If needed, you can simply disable the linting rule entirely for that line by incorporating this into the line above it:

// eslint-disable-next-line @typescript-eslint/no-unused-vars

Answer 3

Answer №2

These days, it's crucial to include the following two rules in your .eslintrc.json file.

The argsIgnorePattern rule allows for underscore arguments in function signatures, while the varsIgnorePattern rule permits underscores in destructuring.

We're specifically using the pattern: ^_ to ensure that variable names start with an underscore.

Example

"rules": {
  "no-unused-vars": ["error", {
    "varsIgnorePattern": "^_",
    "argsIgnorePattern": "^_"
  }]
}

Documentation

Notes

When working with "rest siblings," it is advised to use

"ignoreRestSiblings": true

, as mentioned in the original post. However, it's still recommended to adopt the underscore prefix as a clear indication. Also, bear in mind that without the rest pattern, using ignoreRestSiblings alone may not resolve issues when attempting to destructure and utilize underscore notation.

Answer 4

These days, it's crucial to include the following two rules in your .eslintrc.json file.

The argsIgnorePattern rule allows for underscore arguments in function signatures, while the varsIgnorePattern rule permits underscores in destructuring.

We're specifically using the pattern: ^_ to ensure that variable names start with an underscore.

Example

"rules": {
  "no-unused-vars": ["error", {
    "varsIgnorePattern": "^_",
    "argsIgnorePattern": "^_"
  }]
}

Documentation

Notes

When working with "rest siblings," it is advised to use

"ignoreRestSiblings": true

, as mentioned in the original post. However, it's still recommended to adopt the underscore prefix as a clear indication. Also, bear in mind that without the rest pattern, using ignoreRestSiblings alone may not resolve issues when attempting to destructure and utilize underscore notation.

Answer 5

Answer №3

To address this issue, you can either choose to remove the linter setting by using the ignoreRestSiblings option or pass the complete object and then proceed to remove the specific property.

async function fetchData(username: string): Promise<UserData> {
    const user = await getUserDataByUsernameAsync(username);

    if (user) {
        const {...updatedUser} = user;
        delete updatedUser.password;
        return updatedUser;
    }
    
    return null;
}

Answer 6

To address this issue, you can either choose to remove the linter setting by using the ignoreRestSiblings option or pass the complete object and then proceed to remove the specific property.

async function fetchData(username: string): Promise<UserData> {
    const user = await getUserDataByUsernameAsync(username);

    if (user) {
        const {...updatedUser} = user;
        delete updatedUser.password;
        return updatedUser;
    }
    
    return null;
}

Answer 7

Answer №4

Here's a quick tip:

Use object destructuring to extract specific fields from yourObject like this:
const { field1: _, field2: __, ...rest } = yourObject;

Answer 8

Here's a quick tip:

Use object destructuring to extract specific fields from yourObject like this:
const { field1: _, field2: __, ...rest } = yourObject;

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

Answer №1

Answer №2

Example

Documentation

Notes

Answer №3

Answer №4

Similar questions

Is AngularJS not able to effectively manage the button type "reset"?

Show/Hide a row in a table with a text input based on the selected dropdown choice using Javascript

Update ngModel value following the PUT request response

Property undefined with all alert points filled

Unable to fetch local file using ajax from a local HTML page

Increase the time of a Date by 10 seconds

Aggregate the values in each position across various arrays and merge them into distinct arrays

Updating a value in an array in Angular using the same ID

What is the significance of [Function: bound ] in the context of node debugging?

Unit testing controllers in AngularJS with Karma often involves setting up mock services to simulate dependencies

What can Cordova and express js bring to the table together?

When invoking a function, jQuery may return an empty value

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

HTML5 enables users to pick their preferred font style

The values stored in UI Router $stateParams can only be accessed and viewed

Adding content to a paragraph using Jquery

Exception thrown by the 'upload' method of the Krajee file-input widget

Steps for creating an npm package from the /build folder of Create React App

When the fullscreen modal is opened, the initial image displayed is not the same as the one that was clicked on

Synchronization-free API and callback functions