Guide on creating a custom type for an object utilizing an enum framework

Question

Guide on creating a custom type for an object utilizing an enum framework

Enumerating my shortcuts:

export enum Hotkey {
    MARK_IN = 'markIn',
    MARK_OUT = 'markOut',
    GO_TO_MARK_IN = 'goToMarkIn',
    GO_TO_MARK_OUT = 'goToMarkOut'
}

I am now looking to define a type for a JSON object that validates only keys present in the enum, rejecting any random key entries during development.

type hotkey = keyof typeof Hotkey;

type clone = {[key:hotkey]: string}

const finalObject: clone = {
    MARK_IN : 'markIn'
};

Upon creating the "clone" type as shown above, I encountered the following error:

Error: An index signature parameter type cannot be a literal type or generic type. Consider using a mapped object type instead.ts(1337)

javascript angular typescript

Answer 1

Answer №1

To define a type using an enum for the key, you can follow this approach:

export enum KeyboardShortcuts {
  COPY = 'copy',
  PASTE = 'paste',
  CUT = 'cut',
};

type IKeyboardShortcut = `${ KeyboardShortcuts }`;

type IKeyMap = {
  [action in IKeyboardShortcut]?: string
};

If you prefer to use the enum member as the key, you could also try this:

const myKeyMap: IKeyMap = {
  [KeyboardShortcuts.COPY] = 'some-value'
}

Answer 2

To define a type using an enum for the key, you can follow this approach:

export enum KeyboardShortcuts {
  COPY = 'copy',
  PASTE = 'paste',
  CUT = 'cut',
};

type IKeyboardShortcut = `${ KeyboardShortcuts }`;

type IKeyMap = {
  [action in IKeyboardShortcut]?: string
};

If you prefer to use the enum member as the key, you could also try this:

const myKeyMap: IKeyMap = {
  [KeyboardShortcuts.COPY] = 'some-value'
}

Guide on creating a custom type for an object utilizing an enum framework

Answer №1

Similar questions

Ways to navigate to a new page using jQuery Mobile

Develop a child interface within Typescript

Using Swig template to evaluate a condition

What is the most efficient way to create multiple nested property objects in a shorter amount of time?

Attaching and detaching dynamic views in Angular within an ngFor loop

Difficulty encountered when utilizing an if statement within a function

Developing novel errors in JavaScript

What is the best way to create a universal function that can return a promise while also passing along event

When passing an object to a function inside a promise.then, Typescript may generate an error indicating that the object could

Error Encountered During JavaScript Form Validation

Dynamically switch between doubling Ajax calls in JavaScript

Sending SMS from an Angular application to mobile devices can be achieved through several methods

Retrieve information from an HTML form

Obtain a tuple of identical length from a function

Encountering a constructor problem while Jest is mocking a class from an NPM module

Failed to perform the action using the Angular Post method

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

The FormattedNumber feature in react-intl is not functioning correctly

Leveraging Object.assign for updating fields in Firebase documents

The constructor in a Typescript Angular controller fails to run