The error message "Duplicate identifier readonly" occurs in TypeScript when there are multiple declarations of a property named Constants.read

Question

The error message "Duplicate identifier readonly" occurs in TypeScript when there are multiple declarations of a property named Constants.read

I have implemented the following code in utils -> Constants.ts for my Angular project.

Constants.ts

 export class Constants {
     static readonly LOCAL_STORAGE  = 'LOCAL_STORAGE';
     static readonly SESSION_STORAGE  = 'SESSION_STORAGE';
  }

An error occurs: Duplicate identifier readonly. (property) Constants.readonly : string. when hovering over readonly.

Additionally, [ts] '=' expected. [ts] Cannot find name LOCAL_STORAGE any. is the message displayed when hovering over LOCAL_STORAGE.

When attempting to retrieve data from session_storage in another ts file using let mobileNo = this.db.get(Constants.SESSION_STORAGE, Constants.MOBILE_NO);, the following error is encountered:

property 'SESSION_STORAGE' does not exist on type 'typeOf Constants' any.

If anyone could assist me with this issue, it would be greatly appreciated.

angular typescript session-storage

Answer 1

Answer №1

It appears that the readonly properties feature was first introduced in version 2.0 of typescript. Make sure to verify that your current typescript version is equal to or greater than 2.0.

I had no issues utilizing your class within a fresh stackblitz project. https://stackblitz.com/edit/stackoverflow-54596178

Answer 2

It appears that the readonly properties feature was first introduced in version 2.0 of typescript. Make sure to verify that your current typescript version is equal to or greater than 2.0.

I had no issues utilizing your class within a fresh stackblitz project. https://stackblitz.com/edit/stackoverflow-54596178

Answer 3

Answer №2

It appears that you are attempting to establish a string enum. In TypeScript 2.4, the introduction of string enums allows your code to function seamlessly:

enum E {
    hello = "hello",
    world = "world"
};

For older versions of TypeScript:

export const Enum = createStringEnum(["Prop1", "Prop2"]);
export type Enum = keyof typeof Enum;

function createStringEnum<T extends string>(keys: T[]): {[K in T]: K} {
    return keys.reduce((res, key) => {
        res[key] = key;
        return res;
    }, Object.create(null));
}

The createStringEnum function generates an object with matching keys and values as strings provided in the array.

Moreover, keyof typeof Enum; equates to "Prop1" | "Prop2".

By utilizing Enum, you can ensure the type's accuracy and extract the string values present within the object.

Answer 4

It appears that you are attempting to establish a string enum. In TypeScript 2.4, the introduction of string enums allows your code to function seamlessly:

enum E {
    hello = "hello",
    world = "world"
};

For older versions of TypeScript:

export const Enum = createStringEnum(["Prop1", "Prop2"]);
export type Enum = keyof typeof Enum;

function createStringEnum<T extends string>(keys: T[]): {[K in T]: K} {
    return keys.reduce((res, key) => {
        res[key] = key;
        return res;
    }, Object.create(null));
}

The createStringEnum function generates an object with matching keys and values as strings provided in the array.

Moreover, keyof typeof Enum; equates to "Prop1" | "Prop2".

By utilizing Enum, you can ensure the type's accuracy and extract the string values present within the object.

The error message "Duplicate identifier readonly" occurs in TypeScript when there are multiple declarations of a property named Constants.read

Answer №1

Answer №2

Similar questions

Retrieve items from the <ng-content></ng-content> within the corresponding component in the TypeScript file

Executing npm prepublish on a complete project

Data string not being converted correctly to date format

How to import a child component in Angular 2 [v2.4.10] without declaring it in the

Executing initial function in Angular 2 before the first routing takes place

Unable to retrieve the headers from the error response

Leveraging a component as a property of an object in Vue version 3

Utilize Charts.js to transform negative values into graphical representations

typescript with React's Context API

Tips for building numerous leaflet maps within an Angular page

Using Angular to enhance a Bootstrap NavBar with a Dropdown feature

Is there a memory leak causing Node.js memory growth in the (system)?

Error: TypeScript cannot find @types declaration for restify-client

What is preventing the return type of document.createElement from being designated to a specific generic that is limited to HTMLElement?

Issue encountered while attempting to start a project using Ionic

Tips for fixing prettier errors in express and TypeScript code

What is the best way to implement rest parameters in Typescript when making a function call?

Using React to display an HTTP response containing text or HTML content

Displaying an observable array in Angular 8 using console.log

Angular does not support the dropdown functionality of bootstrap-select