The utilization of a JSON file string to define enum types results in an error stating that the type 'string' cannot be assigned to the type 'number' as mandated for calculated enum member values

Question

The utilization of a JSON file string to define enum types results in an error stating that the type 'string' cannot be assigned to the type 'number' as mandated for calculated enum member values

In my code, I define an enum like this:

export enum AccountSettings {
  accountManagement = "Account management",
  managementOfRelatives = 'Management of relatives',
}

Next, I have a file named en.json, which contains the corresponding data for my enum values

{
  "account_management": "Account management",
  "management_of_relatives": "Management of relatives",
}

But when I try to use this data in my enum definition, I encounter an error:

import en from './en.json';

export enum AccountSettings {
  accountManagement = en.account_management, // displays Type 'string' is not assignable to type 'number'
  managementOfRelatives = 'Management of relatives',
}

I'm looking for a solution on how to successfully incorporate the data from en.json into my enum. Can anyone help with this?

javascript typescript

Answer 1

Answer №1

Regrettably, you are faced with two consecutive challenges:

The JSON content being imported is interpreted by TypeScript in a standard manner, treating the property value as a string. If this was within a .ts file, an as const assertion could have been utilized to make the entire structure readonly and allow TS to infer literal values. Unfortunately, this approach is not viable for files imported from JSON sources, as discussed in ms/TS#32063
Even when dealing with a .ts file, TypeScript only recognizes a literal string value as a string enum representation if defined very simply, such as directly within a const variable; any slight complexity (even in a readonly object) will lead to a rejection by TS, triggering the same error message:

const foo = "bar"
//    ^? "bar" literal string

enum EnumFoo {
    Foo = foo // Accepted
}

const fooObj = {
    foo
    //^? "bar"
} as const // const assertion

enum EnumFooObj {
    Foo = fooObj.foo // Error
}

const bar = fooObj.foo
//    ^? "bar"

enum EnumBar {
    Foo = bar // Error
}

Interactive Demo Link

Answer 2

Regrettably, you are faced with two consecutive challenges:

The JSON content being imported is interpreted by TypeScript in a standard manner, treating the property value as a string. If this was within a .ts file, an as const assertion could have been utilized to make the entire structure readonly and allow TS to infer literal values. Unfortunately, this approach is not viable for files imported from JSON sources, as discussed in ms/TS#32063
Even when dealing with a .ts file, TypeScript only recognizes a literal string value as a string enum representation if defined very simply, such as directly within a const variable; any slight complexity (even in a readonly object) will lead to a rejection by TS, triggering the same error message:

const foo = "bar"
//    ^? "bar" literal string

enum EnumFoo {
    Foo = foo // Accepted
}

const fooObj = {
    foo
    //^? "bar"
} as const // const assertion

enum EnumFooObj {
    Foo = fooObj.foo // Error
}

const bar = fooObj.foo
//    ^? "bar"

enum EnumBar {
    Foo = bar // Error
}

Interactive Demo Link

The utilization of a JSON file string to define enum types results in an error stating that the type 'string' cannot be assigned to the type 'number' as mandated for calculated enum member values

Answer №1

Similar questions

Ways to dynamically manipulate HTML elements in Angular 5

Using JavaScript to showcase a variety of colors in a dropdown menu control

Is there a way to activate the final form when submitted?

Table order is requested, but the index fails to comply

"Angular EventEmitter fails to return specified object, resulting in undefined

Transferring and bringing in components in React without ES6

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

Steer clear of using the character sequence "“" in both PHP and

Navigate to a new webpage using a string of characters as a legitimate web address

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

After refreshing the page, the data stored in the localStorage array gets replaced

What is the best way to send information from child components to their parent in React

Visualizing data with a grouped bar chart in D3.js

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

Click event for a tree component in Angular 2

Vue-router and middleman combination displaying '404 Error' upon page refresh

Create a string that has been properly formatted

Have you considered utilizing encodeURIComponent to encode both the key and parameter values?

Ways to capture an error (message) following a request

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

The utilization of a JSON file string to define enum types results in an error stating that the type 'string' cannot be assigned to the type 'number' as mandated for calculated enum member values

Answer №1

Similar questions

Ways to dynamically manipulate HTML elements in Angular 5

Using JavaScript to showcase a variety of colors in a dropdown menu control

Is there a way to activate the final form when submitted?

Table order is requested, but the index fails to comply

"Angular EventEmitter fails to return specified object, resulting in undefined

Transferring and bringing in components in React without ES6

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

Steer clear of using the character sequence "&#8220;" in both PHP and

Navigate to a new webpage using a string of characters as a legitimate web address

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

After refreshing the page, the data stored in the localStorage array gets replaced

What is the best way to send information from child components to their parent in React

Visualizing data with a grouped bar chart in D3.js

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

Click event for a tree component in Angular 2

Vue-router and middleman combination displaying '404 Error' upon page refresh

Create a string that has been properly formatted

Have you considered utilizing encodeURIComponent to encode both the key and parameter values?

Ways to capture an error (message) following a request

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

Steer clear of using the character sequence "“" in both PHP and