I encounter an issue when trying to declare an enum in TypeScript

At line 26 in my typescript file, the code snippet below shows an enum definition:

export enum ItemType {
  Case = 'Case',
  Study = 'Study',
  Project = 'Project',
  Item = 'Item',
}

I am currently using Visual Studio Code as my IDE. Linting flags an error stating 

'ItemType' is already declared in the upper scope on line 26 column 13.eslint(no-shadow)

The only other usage of ItemType in the file is within an interface definition as shown below:

export interface Item {
  // other fields here

  readonly type: ItemType;
}

No other part of my project defines anything called 'ItemType', which adds to the confusion of this error message. Can you help me understand why this error occurs and how I can resolve it?

typescript

Answer №1

To disable the standard no-shadow linting rule and switch to the typescript-eslint counterpart, follow these steps:

Simply include the following in your eslint setup:


...
"no-shadow": "off",
"@typescript-eslint/no-shadow": ["error"],
...

Answer №2

After investigating further, I managed to recreate the issue with the @typescript-eslint/parser in a bare-bones environment using your code. It seems like there may be discrepancies in the linting rules or style guides you're currently following. To resolve this issue, I made modifications to the eslintrc.js file by adding the following rules:

"rules": {
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "off"
}

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

Developing Angular applications with numerous projects and libraries in the build process

The other day I successfully deployed the initial version of our front-end application, but encountered some confusion during the build process setup. Many Angular apps do not utilize the workspace feature unless they are creating multiple standalone appli ...

angulartypescriptbuildconfiguration

Can we verify if this API response is accurate?

I am currently delving into the world of API's and developing a basic response for users when they hit an endpoint on my express app. One question that has been lingering in my mind is what constitutes a proper API response – must it always be an o ...

javascripttypescriptapiexpress

I find that the value is consistently undefined whenever I attempt to set it within a promise in Angular

Hi there, I've encountered an issue with my getData() function in accountService.ts. I'm attempting to fetch user data and user account data simultaneously using a zip promise. Although the resolve works correctly and I receive the accurate data, ...

angulartypescriptangular8

The issue of binding subjects in an Angular share service

I established a shared service with the following Subject: totalCostSource$ = new Subject<number>(); shareCost(cost: number ) { this.totalCostSource$.next(cost); } Within my component, I have the following code: private incomeTax: num ...

angulartypescript

Showing error messages in Angular when a form is submitted and found to be invalid

My form currently displays an error message under each field if left empty or invalid. However, I want to customize the behavior of the submit button when the form is invalid. <form #projectForm="ngForm" (ngSubmit)="onSubmit()"> ...

javascripthtmlangulartypescriptforms

Tips on typing a collection that may hold numerous instances of a particular object

When working with NgRx actions, I need to define the parameter. This parameter is an object that can contain a varying number of specific objects. These objects are already defined in an Interface. export interface CustomDistribution { maxWindowsActive ...

angulartypescriptngrx

Is there a way to modify material-ui Input without needing a save button?

Is there a way to automatically save changes in the GraphQL without using a save button? I have implemented code that functions as intended, but with a strange issue. When typing "hello" in the input field, it saves multiple times as individual letters, ra ...

reactjstypescriptgraphqlmaterial-uimutation

I'm struggling to transfer information from my form to TypeScript in Angular

Currently, I am working on developing a fullstack application using Node.js and Angular (material UI). However, I have encountered an issue that I need help with. I am trying to figure out how to retrieve data from an Angular form for a small web resource ...

angulardatabasetypescriptformsexpress

Troubleshooting the NullInjectorError in Angular - Service Provider Missing?

I'm facing an issue in my code where I have buttons that should trigger pop-ups displaying details as a list when clicked. However, every time I click the buttons, I encounter the error mentioned below. It seems like I am unable to access the desired ...

javascriptangulartypescript

Tips for choosing an HTML element using Playwright with TypeScript

My goal is to use playwright with typescript in order to select a specific html element. The element I am trying to target has the class "ivu-select-dropdown" and a specific style. <div class="ivu-select-dropdown" style="position: absolut ...

typescriptplaywright

Combining 2 lists in Angular Firebase: A Simple Guide

I have been searching for a solution for the past 2 hours, but unfortunately haven't found one yet. Although I have experience working with both SQL and NoSQL databases, this particular issue is new to me. My problem is quite straightforward: I have t ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire

When working with the latest version of Angular CLI, make sure to include a @NgModule annotation in

Just a heads up: I'm diving into Angular for the first time, so bear with me if I make some rookie mistakes. The Lowdown I've got the latest version of Angular CLI up and running The default app loads without a hitch after 'ng serve' ...

angulartypescriptangular-cliangularjs-ng-model

Having trouble with your Typescript *.ts files?

Having trouble understanding why the command tsc *.ts isn't functioning correctly. The error message TS6053: File '*.ts' not found keeps appearing. Any suggestions on how to compile all the .ts files within a directory? Thank you! ...

typescript

Tips on dynamically translating resources using ngx-translate

Can anyone help me with ngx-translate? I'm struggling to figure out how to dynamically translate resources in HTML. Here's an example: "agreement.status.0": "New", "agreement.status.1": "Rejected", ...

angulartypescript

Unable to translate text on the loading page

Encountering a peculiar issue with the translate service. Here's how I set it up: export class AppComponent implements OnInit { constructor( private translateService: TranslateService, angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics ...

angulartypescriptangular8angular-translate

Using Datatable.net with Angular 6 for Change Monitoring

I've been encountering several issues with the custom datatable component that I created. One specific problem is that when I delete a row from my datatable, not only does the row disappear, but also the pagination functionality and other features st ...

angulartypescriptdatatablesangular6

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Is there a way to replace the if else statement in the function using a Ternary operator in JavaScript? private getProductName(productType: string): string { let productName = 'Product not found'; this.deal.packages.find(p => p.isSele ...

javascripttypescriptconditional-operator

In React, the edit mode fails to display class attributes

When I attempted to combine both the creation and editing functionalities in one form, I encountered a problem. Specifically, I was able to retrieve the correct ID value when editing an element, but I struggled to access the attribute values. import { yup ...

reactjstypescriptreact-tsx

What is the process for obtaining the result of an asynchronous function triggered by an event in HTML?

I am currently working on an Angular application where I have a button that triggers a click event. The method being called is asynchronous and involves subscribing to an observable. My goal is to call player.start() only after the listItems.getData() meth ...

angulartypescriptasynchronousasync-await

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

javascriptreactjstypescriptreact-typescript