TypeScript enum to specific object

Question

I have the following TypeScript enum:

export declare enum SupportedLanguages {
    en,
    fr
}

If I import it in my react application and console.log it, I will get the following object returned:

{
  en: "en", 
  fr: "fr"
}

How can I manipulate it, so that I get the following object returned?

{
  en: "",
  fr: ""
}

I tried it with const Lang = Object.keys(SupportedLanguages) and also with .map() but I did not get the expected object returned.

Enum on the level of TS is a type and a structure, you cannot enumarate over it. But you can create a type and a data with exact fields as enum has type ObjFromEnum = Record<SupportedLanguages, ''> const obj: ObjFromEnum = { [SupportedLanguages.en]: '', [SupportedLanguages.fr]: '', }; — Maciej Sikora
– Maciej Sikora, Commented Dec 11, 2019 at 13:32

tony · Accepted Answer · 2021-01-17 14:19:45Z

3

You can get the keys, and map them to a tupple of [key, ''], and convert back to an object with Object.fromEntries():

const supportedLanguages = {
  en: "en", 
  fr: "fr"
};

const result = Object.fromEntries(
  Object.keys(supportedLanguages)
    .map(k => [k, ''])
);

console.log(result);

If you receive an error like this:

TS2550: Property 'fromEntries' does not exist on type 'ObjectConstructor'. Do you need to change your target library? Try changing the lib compiler option to 'es2019' or later.

Add es2019 to compilerOptions.lib in your project's tsconfig.json:

{
  "compilerOptions": {
    "lib": [
      "es2019"
    ]
  }
}

edited Jan 17, 2021 at 14:19

tony

1,0289 silver badges22 bronze badges

answered Dec 11, 2019 at 13:31

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathew Berg · Accepted Answer · 2019-12-11 13:36:00Z

2

Are you just looking to get a new object with all the data as empty strings?

var supportedLanguages = {
  en: "en", 
  fr: "fr"
};

var result = Object.keys(supportedLanguages)
    .reduce((accum, key) => 
        Object.assign(accum, { [key]: "" })
    , {});

console.log(result); // { "en": "", "fr": "" }

edited Dec 11, 2019 at 13:36

answered Dec 11, 2019 at 13:28

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

1 Comment

Mr. Polywhirl Over a year ago

Even simpler: Object.keys(supportedLanguages).reduce((a,k)=>Object.assign(a,{[k]:''}),{})

hrdkisback · Accepted Answer · 2019-12-11 13:37:56Z

2

In typescript I am using below solution,

export declare enum SupportedLanguages {
    en="",
    fr=""
}

Also you can use lib. for some default methods. https://www.npmjs.com/package/enum-values

answered Dec 11, 2019 at 13:37

hrdkisback

9088 silver badges20 bronze badges

Comments

Mr. Polywhirl · Accepted Answer · 2019-12-11 13:46:04Z

You could translate the object to a key arr → set → map.

Here are some trivial translation functions:

const keySet   = o => new Set(Object.keys(o))
const arrToMap = a => a.reduce((a, k) => Object.assign(a, { [k]: '' }), {})
const setToMap = s => arrToMap([...s])
const keyMap   = o => setToMap(keySet(o))


const SupportedLanguages = {
  en : "en",
  fr : "fr"
}

console.log(Object.keys(SupportedLanguages)) // arr
console.log([...keySet(SupportedLanguages)]) // set
console.log(keyMap(SupportedLanguages))      // obj

.as-console-wrapper { top: 0; max-height: 100% !important; }

Collectives™ on Stack Overflow

TypeScript enum to specific object

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related