Typescript: Use `enum` values as `type`

Question

I would like to use following enum's values:

export enum GenFormats {
    SHORT_LOWER = 'm/f', SHORT_UPPER = 'M/F', FULL = 'Male/Female'
};

as type given below:

export interface IGenderOptions {
    format: 'm/f' | 'M/F' | 'Male/Female'
};

by using Type extraction/definition something like:

{{some type cast/logic}}<GenFormats>    // Outputs: 'm/f' | 'M/F' | 'Male/Female'

Updated Question:

Here is my code:

export enum EGenderFormats {
    SHORT_LOWER = 'm/f', SHORT_UPPER = 'M/F', FULL = 'Male/Female'
};

export interface IGenderFormats {
    SHORT_LOWER: 'm/f'; SHORT_UPPER: 'M/F'; FULL: 'Male/Female';
};

export interface IGenderOptions {
    format: IGenderFormats[keyof IGenderFormats]
};

const DEFAULTS: IGenderOptions = {
    format: EGenderFormats.FULL
};

My question is, how can I use single entity either enum EGenderFormats or interface IGenderFormats instead of both?

I am using Typescript 3.2.2

Thanks

Can you please post your code on stackblitz and elaborate your problem? — dileepkumar jami
– dileepkumar jami, Commented Feb 15, 2019 at 8:41
@dileepkumar jami, I have provided maximum description I could. — Vikram
– Vikram, Commented Feb 15, 2019 at 8:47
Possible duplicate of getting a type for the values of a string enum — jcalz
– jcalz, Commented Feb 15, 2019 at 15:13

Dor Shinar · Accepted Answer · 2019-02-16 16:04:52Z

7

You can use the Enum as a type:

export enum EGenderFormats {
  SHORT_LOWER = "m/f",
  SHORT_UPPER = "M/F",
  FULL = "Male/Female"
}

type SGenderOptions = "m/f" | "M/F" | "Male/Female"

export interface IGenderOptions {
  format: EGenderFormats | SGenderOptions;
}

const DEFAULTS: IGenderOptions = {
  format: EGenderFormats.FULL
};

const OTHER_DEFAULTS: IGenderOptions = {
  format: "M/F"
};

edited Feb 16, 2019 at 16:04

answered Feb 16, 2019 at 15:26

Dor Shinar

1,5222 gold badges11 silver badges17 bronze badges

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

5 Comments

Vikram Over a year ago

Doing this does not accept const DEFAULTS: IGenderOptions = { format: 'Male/Female' };

Dor Shinar Over a year ago

I think that if you enforce the format options using an enum, there's to reason to allow string input. Either way you can't have both worlds unless you use a union type. I'll update the answer with an example.

Vikram Over a year ago

Cannot we create type dynamically using enum or interface using some Advanced type features? I am using latest Typescript.

Dor Shinar Over a year ago

I fail to understand why you insist having it both ways, nor can I find a TypeScript way to declare such a type.

Brandon Taylor Over a year ago

@Vikram yes, you can do: type YourType = ${ EGenderFormats };

Ruben Verster · Accepted Answer · 2022-04-08 18:45:37Z

I think with the latest TypeScript you can just assign it. This is how I set up my easy-peasy store in an app for pages using enum

import { Action, action, createStore } from "easy-peasy";
import { createTypedHooks } from "easy-peasy";

interface IStoreModel {
  page: Pages;
  setPage: Action<IStoreModel, Pages>;
}

enum Pages {
  Home = "home",
  Admin = "admin",
}

const typedHooks = createTypedHooks<IStoreModel>();

const store = createStore<IStoreModel>({
  page: Pages.Admin,
  setPage: action((state, payload) => {
    state.page = payload;
  }),
});

export const useStoreActions = typedHooks.useStoreActions;
export const useStoreDispatch = typedHooks.useStoreDispatch;
export const useStoreState = typedHooks.useStoreState;

Also, look here for the answer, you will definitely find it :) https://blog.logrocket.com/typescript-string-enums-guide
typeof ;)

Jafar Jabr · Accepted Answer · 2023-06-07 21:03:54Z

2

this is an old question but none of the answers really answering it, maybe you looking for:

keyof typeof EGenderFormats

answered Jun 7, 2023 at 21:03

Jafar Jabr

7025 silver badges11 bronze badges

Collectives™ on Stack Overflow

Typescript: Use `enum` values as `type`

Updated Question:

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Updated Question:

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related