How to use enum as index key type in typescript?

by

  1. |undefined does not make a property optional, just means it can be undefined, there is a proposal to make |undefined members optional but currently it’s not implemented. You need to use ? after ] to make all properties optional

    { [key in DialogType]?: Dialog }

  2. You can use the dialog enum values as keys, but they need to be computed properties: 

    let openDialogs: { [key in DialogType]?: Dialog } = {
    [DialogType.Options]: undefined,
};

  3. { [key: number or string]: Dialog } is an index signature. Index signatures are restricted to only number or string as the key type (not even a union of the two will work). So if you use an index signature you can index by any number or string (we can’t restrict to only DialogType keys). The concept you are using here is called mapped types. Mapped types basically generate a new type based on a union of keys (in this case the members of DialogType enum) and a set of mapping rules. The type we created above is basically equivalent to:

    let o: { [DialogType.Help]?: Dialog; [DialogType.Options]?: Dialog; }

More Related Contents:

  1. Generic type to get enum keys as union string in typescript?
  2. Typescript has unions, so are enums redundant?
  3. Typescript: string literal union type from enum
  4. Using enums as types allows values that don’t exist in the enum
  5. Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index
  6. TypeScript function overloading
  7. get and set in TypeScript
  8. How can I see the full expanded contract of a Typescript type?
  9. How do you emulate nominal typing in TypeScript?
  10. Typescript: check if a type is a union
  11. How do you produce a .d.ts “typings” definition file from an existing JavaScript library?
  12. TypeScript – extract interface members only – possible?
  13. Combining generics with index type
  14. TypeScript TS7015 error when accessing an enum using a string type parameter
  15. DeepReadonly Object Typescript
  16. How do I import other TypeScript files?
  17. How can I augment a property within a third-party TypeScript interface defined as “any”?
  18. What does the “as” keyword do?
  19. Typescript ReturnType of generic function
  20. Typescript check for the ‘any’ type
  21. Typescript: Retrieve element type information from array type
  22. Hide .js.map files in Visual Studio Code: File Nesting
  23. using absolute paths in typescript for imports
  24. TypeScript interfaces not enforcing properties when an object is assigned
  25. Can I reuse the parameter definition of a function in Typescript?
  26. Typescript and spread operator?
  27. Angular 2 loader on each http request
  28. Typescript: type narrowing not working for `in` when key is stored in a variable
  29. Run factory function on import in TypeScript?
  30. Self-referencing return type for static methods in inheriting classes

Leave a Comment