How to build a type from enum values in TypeScript?

typescript types typescript-generics
moltar picture moltar · Mar 13, 2019 · Viewed 9.8k times · Source

Given the following:

enum FooKeys {
  FOO = 'foo',
  BAR = 'bar',
}

I'd like to make an interface like this one, but instead of defining keys by hand, build it out of enum's values.

interface Foo {
  foo: string
  bar: string
}

Is something like this possible with TypeScript?

Thanks!

Answer

jcalz picture jcalz · Mar 13, 2019

Yes, you can use enum values as keys. And you can use a mapped type like the standard library's Record<K, V> to prevent repetition:

enum FooKeys {
  FOO = 'foo',
  BAR = 'bar',
}

// probably all you need, but it's a type alias
type FooType = Record<FooKeys, string>;

// if you need an interface instead you can do this
interface FooInterface extends FooType {};

And you can verify that it works:

declare const foo: FooInterface;
foo.foo; // okay
foo[FooKeys.FOO]; // okay

foo.bar; // okay
foo[FooKeys.BAR]; // okay

foo.baz; // error

Does that work for you? Good luck!

Related questions

Defining TypeScript callback type

I've got the following class in TypeScript: class CallbackTest { public myCallback; public doWork(): void { //doing some work... this.myCallback(); //calling callback } } I am using the class like this: var test = new CallbackTest(); test.myCallback = () => alert("done"); test.doWork(); The …

Read More
Error: Cannot invoke an expression whose type lacks a call signature

I am brand new to typescript, and I have two classes. In the parent class I have: abstract class Component { public deps: any = {}; public props: any = {}; public setProp(prop: string): any { return <T>(val: T): T => { this.…

Read More
Typescript input onchange event.target.value

In my react and typescript app, I use: onChange={(e) => data.motto = (e.target as any).value}. How do I correctly define the typings for the class, so I wouldn't have to hack my way around the type system …

Read More