TypeScript: Generate type or interface of enum values

Question

I'd like to have an interface generated out of the values of an enum. I have the following use-case in React:

I have an enum with potentially a lot of key value pairs. Each of the enum values is used as form IDs, so I get the name and the value of the input element in an event listener. I'd like to set the state to this.setState({ name: value }), but the name, description, etc. should be type-safe.

So I somehow need to generate an interface out of the values of the enum (because an interface cannot inherit from an enum) to be able to do the following for example: this.setState({ name: 'hello world' }) and this.setState({ description: 'a description' })

enum InputIDs {
    NAME = 'name',
    DESCRIPTION = 'description',
    // ... many more items ...
}

interface IMyReactComponentState {
    alreadyExisting: boolean;
    [InputIDs.NAME]: string;
    // ... all other items from the Test enum should go here but I'd like to generate it somehow ...
}

class MyReactComponent extends React.Component< ISomeProps, IMyReactComponentState > {
    constructor(props: ISomeProps) {
        super(props);
        this.state = {
            alreadyExisting: false,
            [InputIDs.NAME]: '',
            // more default values
        }
    }

    private handleChange = (event: React.FormEvent<HTMLDivElement>) => {
        // TODO make type safe
        const {name, value}: {name: any, value: string} = (event.target as any); // event.target is either HTMLInputElement, HTMLSelectElement or HTMLTextAreaElement

        // store the value of the corresponding input in state to preserve it when changing tabs
        this.setState({
            [name]: value
        });
  }

}

My problem is that something along these lines is not possible:

interface IMyReactComponentState extends InputIDs {
    alreadyExisting: boolean;
}

Any ideas how I can keep the enum with the typings of IMyReactComponentState in sync without writing an interface myself?

Thanks in advance! Not sure if this has been asked already - if so I haven't found the answer yet!

EDIT (May 8th, 2019):

We're using TypeScript 2.8.1 in our project

Titian Cernicova-Dragomir · Accepted Answer · 2019-05-07 10:21:45Z

1

You need to use an interasection and a mapped type (the predefined Record mapped type should do)

enum InputIDs {
    NAME = 'name',
    DESCRIPTION = 'description',
    // ... many more items ...
}

type IMyReactComponentState = {
    alreadyExisting: boolean;
} & Record<InputIDs, string>

class MyReactComponent { // simplified
    state:IMyReactComponentState
    constructor() {        
        this.state = {
            alreadyExisting: false,
            [InputIDs.NAME]: '',
            [InputIDs.DESCRIPTION]: ''
        }
    }
}

edited May 7, 2019 at 10:21

answered May 7, 2019 at 9:57

Titian Cernicova-Dragomir

253k37 gold badges466 silver badges396 bronze badges

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

Comments

Aleksey L. · Accepted Answer · 2019-05-07 09:58:18Z

1

You can use mapped types to produce type with enum values as a keys, then use intersection or extend it with additional properties:

type InputValues = {
    [key in InputIDs]: string
}

Then

type IMyReactComponentState = InputValues & {
    alreadyExisting: boolean
};

Or:

interface IMyReactComponentState extends InputValues {
    alreadyExisting: boolean
}

answered May 7, 2019 at 9:58

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Comments

Nik · Accepted Answer · 2019-05-07 09:12:00Z

0

You can define your IMyReactComponentState as

interface IMyReactComponentState {
    alreadyExisting: boolean;
    [key in keyof typeof InputIDs]: string 
}

answered May 7, 2019 at 9:12

Nik

2,2921 gold badge18 silver badges21 bronze badges

1 Comment

lehnerchristian Over a year ago

thanks for your quick response. then I get the following error ']' expected.ts(1005) unused expression, expected an assignment or function calltslint(no-unused-expression) (I added a semicolon in the second line of the interface, although I think they're not needed in the last definition)

Collectives™ on Stack Overflow

TypeScript: Generate type or interface of enum values

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related