Destructuring object, ability to explicitly tell the variable is unused

[ejowers]

🔍 Search Terms

object destructuring, omit var from object, omit variable from object, omit property from object, object destructuring with rest operator, object destructureing with spread operator

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

Similar to this request, but for objects: #31388

I would like a way to destructure an object using the rest operator, while omitting specific fields WITHOUT getting the ts error "no-unused-vars".

I imagine the solution looking like this, where unused vars are prefaced with an underscore:

const { _unusedVar, ...rest } = obj;

📃 Motivating Example

I am using a react-hook-form Controller to wrap my form components. The field property contains a ref that causes an error in my components if passed directly. I am currently destructuring the field object with the ref pulled out, which causes the ts "no-unused-vars" warning for the ref.

Simplified example:

const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { ref, ...field } }) => ( // causes ts 'no-unused-vars'
          <Component {...field} />
      )}
    />
  );

💻 Use Cases

1. What do you want to use this for?
I am trying to pass properties from a third-party library to my components, but some of the props break my components (such as refs) and need to be omitted. There are many properties so I would prefer not to specify all the props individually.

2. What shortcomings exist with current approaches?
There are current ways to achieve this so it's not a huge deal, but it would be nice to be able to explicitly mark a variable as unused. Current workarounds include:

• Specifying the used vars in the destructuring. This can be cumbersome when there are many properties or when I just want to pass all the used variables to a component. Example:

// omits var2 without an error
const { var1, var3 } = obj;

• Setting ignoreRestSiblings to true. I would prefer not to disable errors and warnings since they are sometimes still wanted.

3. What workarounds are you using in the meantime?
I have currently disabled the ignoreRestSiblings warnings, but would like to reenable it if possible.

[MartinJohns]

while omitting specific fields WITHOUT getting the ts error "no-unused-vars".

I'm not sure what you're seeing? I don't get an error. TypeScript is smart enough to understand that the var is used as part of the destructuring. Playground link

I imagine the solution looking like this, where unused vars are prefaced with an underscore:

It would need to be using the renaming syntax const { unusedVar: __unusedVar, ..., because properties may start with a leading underscore, and TypeScript will not emit different syntax (omitting the underscore).

[RyanCavanaugh]

This rule is eslint's, not TypeScript's. TypeScript unused variable checking already knows that this shouldn't be warned on.

[ejowers]

This rule is eslint's, not TypeScript's. TypeScript unused variable checking already knows that this shouldn't be warned on.

You are right. Closing this issue.