ES6 Setters | warning TS2300: Identical identifier detected

Currently, I am developing a class for an Angular 2 component that involves the use of Input/Output decorators along with a setter as shown below:

export class ItemDetails {

    // Assigning 'item' to a locally scoped property
    @Input('item') _item: Item;
    originalName: string;
    selectedItem: Item;

    // Event emitters for save and cancel operations
    @Output() saved = new EventEmitter();
    @Output() cancelled = new EventEmitter();

    // Additional logic using ES6 setter on every update
    set _item(value: Item) {
        if (value) this.originalName = value.name;
        this.selectedItem = Object.assign({}, value);
    }
}

Even though I believe this code is correct, I encountered the following error:

error TS2300: Duplicate identifier '_item'

I would appreciate any insights on why this error occurs. Thank you :)

Answer №1

In order to achieve my desired outcome, I found that this updated class is functioning effectively:

export class ItemDetails {

    @Input('item') set _item(value: Item) {

        if (value) this.initialName = value.name;
          this.selectedItem = Object.assign({}, value);
    }
    initialName: string;
    selectedItem: Item;

    @Output() saved = new EventEmitter();
    @Output() cancelled = new EventEmitter();
}

Answer №2

When utilizing a setter, it creates its own class member rather than attaching to an existing property. It's important to note that you can't have both _item as a variable and as the name of a setter within the same class.

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

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

Exploring ngModel components with a specified class

In my HTML code, I've assigned many elements with ngModel defined as ng-model = "object.[something]". For example: <div class="form-group row" ng-model="object.askUser"> I use this method to keep my purpose clear for these elements. My questi ...

The error message indicates a change in the binding value within the template, resulting in an

This is the structure of my component A : <nb-tab tabTitle="Photos" [badgeText]="centerPictures?.pictures?.length" badgePosition="top right" badgeStatus="info"> <app-center-pictures #centerPictures [center]="center"> ...

The server response value is not appearing in Angular 5

It appears that my client is unable to capture the response data from the server and display it. Below is the code for my component: export class MyComponent implements OnInit { data: string; constructor(private myService: MyService) {} ngOnInit ...

"Exploring the Angular 3 router's wildcard route matching feature

Why does the following route configuration always navigate to ** instead of the route for app/jungle? import {bootstrap} from '@angular/platform-browser-dynamic'; import { RouterConfig, provideRouter } from '@angular/<a href="/cdn-cgi/ ...

Is it possible to implement MV* in Polymer using models and services as polymer elements?

Imagine I want two views (polymer-elements) to share a model, how can this be achieved? In Angular, the model would reside in a singleton service that is injected into the views, allowing both views to access the same data source. I attempted to replicat ...

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

Troubleshooting Vue 2 TypeScript Components Import Issue in VS Code

Has anyone experienced issues with TS pointing errors when importing custom components into a .vue file using the options api and webpack? The import is successful, everything works after bundling, but I'm still encountering annoying errors in the .vu ...

When using angularjs, the $window.location.href may cause the page to load without any

I have a dilemma where I have linked all my CSS and JS files in the index.html file, but subpages are located in a templates directory. When using $window.location.href, only a plain HTML page is returned without any CSS styles. The page renders fine when ...

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

I am facing an issue with returning a value from a function. It seems like a simple task - just looping through my HTMLElements and returning the one I need. This problem is new to me, and I have spent a considerable amount of time debugging the code and ...

Transforming an Image URL into base64 format using Angular

I'm currently facing difficulty when attempting to convert a specified image URL into base64. In my scenario, I have a string that represents the image's path. var imgUrl = `./assets/logoEmpresas/${empresa.logoUrl}` Is there a way to directly co ...

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

Can you explain the meaning of this TypeScript code snippet?

interface Configuration { [input: string]: any; } This is really puzzling to me, the 'input' is declared as a string type with any value? Appreciate your help. ...

What is the reason for not being able to call abstract protected methods from child classes?

Here is a simplified version of my project requirements: abstract class Parent { protected abstract method(): any; } class Child extends Parent { protected method(): any {} protected other() { let a: Parent = new Child() a.me ...

"Encountering difficulty in importing the graphql node package with the import keyword

Could you please clarify this for me? Whenever I attempt to bring in the graphql node package using the import keyword, the imported module is recognized as undefined. However, if I utilize require, the module imports correctly. Interestingly, other node ...

The dropdown list in angularjs is failing to populate with options

For populating a dropdownlist using angularjs, I attempted the following: var app = angular.module('App', []); app.controller('UserSelection', function ($scope, $location) { var User = this; User.onSelectChange = function () { i ...

What could be causing the NodeJs cluster module to be malfunctioning?

Currently, I am in the process of constructing an express server and have been exploring the concept of scaling NodeJS applications. Upon my research, one of the initial things that caught my eye was the built-in cluster module which allows for leveraging ...

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value

I recently started using Vue-Cli3.0 and came across this interesting module for Vue.js called https://github.com/holiber/sl-vue-tree It's a customizable draggable tree component for Vue.js, but I encountered an issue where it couldn't copy funct ...

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...