Is it possible for me to disable the eslint typedef rule for destructuring within lambdas?

Is it possible to disable the typedef rule only for array or object destructuring in lambdas?

getPersonsNames(): string[] {
    type Person = { name: string; age: number };
    const persons: Person[] = [
        { name: `Jan Kowalski`, age: 12 },
        { name: `Justyna Kowalczyk`, age: 22 }
    ];
    return persons.map(({ name }) => name); 
}

I prefer to use typedefs for destructuring, but I want to exclude these specific cases. Is there a way to do this?


I attempted to add 'arrow-parameter': false, (and arrowParameter: false as shown above) to @typescript-eslint/typedef, but it had no effect.

Documentation of the rule used: @typescript-eslint/typedef

Files for Reproduction

.eslintrc.js configuration file:

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: './tsconfig.json',
        createDefaultProgram: true,
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    rules: {
        '@typescript-eslint/typedef': [
            'error',
            {
                'arrowParameter': false,
                'propertyDeclaration': true,
                'parameter': true,
                'memberVariableDeclaration': true,
                'callSignature': true,
                'variableDeclaration': true,
                'arrayDestructuring': true,
                'objectDestructuring': true
            }
        ],
    },
}

.gitignore:

node_modules

index.ts:

function getPersonsNames(): string[] {
    type Person = { name: string; age: number };
    const persons: Person[] = [
        { name: `Jan Kowalski`, age: 12 },
        { name: `Justyna Kowalczyk`, age: 22 }
    ];
    return persons.map(({ name }) => name);
}

getPersonsNames();

package.json:

{
  "name": "typedef-in-destructuring-lambdas",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext .ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.3.0",
    "@typescript-eslint/parser": "^4.3.0",
    "eslint": "^7.10.0",
    "typescript": "^4.0.3"
  }
}

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2017",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "noEmit": true,
        "noEmitHelpers": true,
        "importHelpers": true,
        "strictNullChecks": false,
        "skipLibCheck": true,
        "lib": [
            "dom",
            "es6",
            "es2019"
        ]
    }
}

Answer №1

This particular rule does not differentiate between different types of destructuring.
It is important to note that additional customization will not be added to this rule as it is not recommended for most codebases.

Using unnecessary type annotations and relying on this rule is considered an anti-pattern, which can have detrimental effects on the overall quality of your codebase.


The purpose of this rule is not for everyday use in a codebase; rather, it is meant to assist with transitioning code in preparation for enabling the noImplicitAny compiler option.

Overuse of unnecessary type annotations can negatively impact your codebase. Each annotation adds maintenance burden (requiring manual updates to stay accurate) and also hinders compilation speed as TypeScript must spend time verifying each annotation's correctness.

In my capacity as the maintainer of @typescript-eslint, I strongly discourage the use of the typedef rule.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for confirming the validity of JSON data using a Typescript interface from user input

I am facing an issue with validating an input field (text-area) that receives an array of objects in JSON format. The validation needs to be done at run-time based on an interface created in typescript. Two interfaces Employee and Address were created wit ...

Connecting Angular modules via npm link is a great way to share common

Creating a project with a shared module that contains generic elements and components, such as a header, is my goal. This shared module will eventually be added as a dependency in package.json and installed through Nexus. However, during the development ph ...

Angular 8: Setting up Variable Dependency within a Component Class

I have a dilemma in Angular where I need to work with two objects of the same type. public addressFinalData: AddressMailingData; mailingArchive: AddressMailingData[] = []; Is there a way to subscribe to data objects of the same type within one componen ...

Is your pure function component not receiving or responding to input props correctly?

Here is my code snippet: const actionCreators = { action: AppReducer.actionCreators.action } interface GlobalState { user: Model.User | null; } interface InputState { setStashBarWidth(width: number); stashWidth: number; } const Header = ...

Exploring async componentDidMount testing using Jest and Enzyme with React

angular:12.4.0 mocha: "8.1.2" puppeteer: 6.6.0 babel: 7.3.1 sample code: class Example extends Angular.Component<undefined,undefined>{ test:number; async componentWillMount() { this.test = 50; let jest = await import('jest&apos ...

Navbar Growth Effect

I'm attempting to create an expanding effect in my navbar using Angular. When I click on "show information," the content should slide up. The issue is that the top part of my footer does not follow the effect. I have tried something like: <foot ...

Changing the value of an element in an array using typescript within an Angular context

I am currently working with Angular 5 and I have a task to update the array values based on the selectedMobile array. Below is my code snippet: const mobilelist = [ { 'key': 'apple', 'name': 'Apple', 'check ...

What is the method for declaring constructor functions as object properties in TypeScript?

I am facing a challenge with typing an object that has a property which is a constructor function. How can I properly define the type for this situation: interface MyObj { constructor: () => ({ init: () => void }) } const myObj = { construct ...

RxJS - Only emit if another source does not emit within a specified time frame

Imagine having two observables. Whenever the first one emits, there should be a 2-second pause to check if the other observable emits something within that timeframe. If it does, then no emission should occur. However, if it doesn't emit anything, the ...

Does the Typescript compiler sometimes skip adding braces?

I am encountering a problem with compiling a specific section of code in my Angular2 project. public reloadRecords() { let step = (this.timeInterval.max - this.timeInterval.min) / this.recordsChartSteps; let data = new Array(this.recordsChartSteps ...

Using the spread operator in Typescript with an object that contains methods

Within my Angular project, I am faced with an object that includes a type and status field where the status can change depending on the type. While some might argue that this is not the best design practice, it is how things are currently structured in my ...

Toggle the presence of a string in an array with a checkbox

Currently, I am working on a user creation form for my Next.js front end project using TypeScript. The main goal is to allow an administrator to create new users by filling out a simple form which will generate a basic user object. Here is the structure of ...

What is the best approach for resolving this asynchronous task sequencing issue in JavaScript?

Below is a code snippet where tasks are defined as an object and the function definition should ensure the expected output is met. Let tasks = { ‘a’: { job: function(finish){ setTimeout(() => { ...

Troubleshooting Angular: Implementing scrollIntoView on route change without using setTimeout within ngAfterViewInit

I am currently working on an Angular component where I need to implement scrollIntoView functionality when the route changes. Below is a snippet of the relevant code from my component: @ViewChild('structure') structure: ElementRef | undefined; le ...

Handling onChange events for several typescript <Select> elements

As a non-TS developer, I'm delving into the realm of multiple selects and dropdown menus with Material-UI's select component. Progressing from a basic setup, I successfully implemented a single select but now face a challenge in adding another dr ...

Angular project icons not displaying in the browser

My current project in Angular was functioning properly until recently. I am facing an issue where the images are not being displayed on the browser when I run ng serve, resulting in a 404 error. Interestingly, everything else seems to be working fine witho ...

"I am looking for a way to incorporate animation into my Angular application when the data changes. Specifically, I am interested in adding animation effects to

Whenever I click on the left or right button, the data should come with animation. However, it did not work for me. I tried adding some void animation in Angular and placed a trigger on my HTML element. The animation worked when the page was refreshed, bu ...

Tips for preventing the 'ResizeObserver loop limit exceeded' error from popping up in your React application

Recently, an unfamiliar error started popping up in my React application: ResizeObserver loop limit exceeded It seems that most people believe this error is harmless and there's no need to be concerned. However, I'm unsure how to either ignore ...

NestJS is having trouble importing generated types from the Prisma client

When working with Prisma in conjunction with NestJs, I encountered an issue after defining my model and generating it using npx prisma generate. Upon importing the generated type, I can easily infer its structure: import { FulfilmentReport, FulfilmentRepor ...

Transitioning to TypeScript: Why won't my function get identified?

I am in the process of transitioning a functional JavaScript project to TypeScript. The project incorporates nightwatch.js Below is my primary test class: declare function require(path: string): any; import * as dotenv from "dotenv"; import signinPage = ...