Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript object destructuring is caught by ESLint no-unused-vars rule

I have an object in Typescript that I am destructuring in order to extract a partial object. However, it fails my linter check:

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

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

    return null;
}

As you can see, the above code grabs an object and strips out some parts of the object that we don't want to return, and returns the rest of the object.

However, the linter gives a warning:

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

The object destructuring is assigning passport to a value and result to another object value and passport is the one that isn't being used. How do I fix this issue in order to pass the linter?

like image 264
noblerare Avatar asked Jul 10 '20 17:07

noblerare


People also ask

How do you ignore no-unused-vars ESLint?

To apply the ESLint no-unused-vars rule to a block of JavaScript code, we can wrap the code block that we want to apply the rule to with /* eslint-disable no-unused-vars */ and /* eslint-enable no-unused-vars */ respectively. to wrap the code that we want the rule to apply with the comments.

How do you remove unused variables from ESLint?

To automatically remove unused imports, we will need to add the eslint-plugin-unused-imports plugin. Now, when you run ESLint, you should see error lines saying error '<imported-var>' is defined but never used unused-imports/no-unused-imports for the files where you have unused imports.

Does Destructuring mutate?

How to Mutate Arrays with Destructuring. Mutating means changing the form or value of an element. A value is said to be mutable if it can be changed. With the help of destructing in arrays, we can mutate arrays themselves.

Can you Destructure a function in JavaScript?

The object destructuring is a useful JavaScript feature to extract properties from objects and bind them to variables. What's better, object destructuring can extract multiple properties in one statement, can access properties from nested objects, and can set a default value if the property doesn't exist.


2 Answers

You can disable this verification for rest siblings adding "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }] to your list of rules in eslintrc.js.

Example:

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"
    }
  }
};

You can also opt for disabling the linting rule for that line altogether adding this to the line above it:

// eslint-disable-next-line @typescript-eslint/no-unused-vars
like image 147
Telmo Trooper Avatar answered Oct 09 '22 15:10

Telmo Trooper


You can look to either remove the linter setting using the ignoreRestSiblings or pass the entire object and then look to delete the property.

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

    if (userEntity ) {
        const {...result} = userEntity;
        delete result.password;
        return result
    }
    
    return null;
}
like image 5
Luke Avatar answered Oct 09 '22 16:10

Luke