Types from both keys and values of object in Typescript

by

The compiler will widen string literal type to string, unless some specific conditions are met as explained in github issues and PR, or const assertion is used for literal value. Const assertions appeared in TypeScript 3.4:

const KeyToVal = {
    MyKey1: 'myValue1',
    MyKey2: 'myValue2',
} as const;

type Keys = keyof typeof KeyToVal;
type Values = typeof KeyToVal[Keys]; //  "myValue1" | "myValue2"

Prior to 3.4, there was a workaround to get the same effect. To make the compiler infer literal types, you had to pass your object through a function with appropriately crafted generic type parameters, this one seems to do the trick for this case:

function t<V extends string, T extends {[key in string]: V}>(o: T): T {return o}

The whole purpose of this function is to capture and preserve types to enable type inference, it’s entirely useless otherwise, but with it you can have

const KeyToVal = t({
    MyKey1: 'myValue1',
    MyKey2: 'myValue2',
});

type Keys = keyof typeof KeyToVal;
type Values = typeof KeyToVal[Keys]; //  "myValue1" | "myValue2"

More Related Contents:

  1. Import class in definition file (*d.ts)
  2. Types for function that applys name of function and arguments
  3. Is there a way to define type for array with unique items in typescript?
  4. Keyof inferring string | number when key is only a string
  5. How to configure custom global interfaces (.d.ts files) for TypeScript?
  6. TypeScript 2: custom typings for untyped npm module
  7. Exclude/overwrite npm-provided typings
  8. Typescript 2.0. “types” field in tsconfig.json
  9. TypeScript typings in npm @types org packages
  10. Typescript does not copy d.ts files to build
  11. Extend (Update) third-party old type declaration interface with new one
  12. Mapping tuple-typed value to different tuple-typed value without casts
  13. NPM package cannot be used as a JSX Component – Type errors
  14. ts-node ignores d.ts files while tsc successfully compiles the project
  15. How should I use @types with TypeScript 2
  16. Global types in typescript
  17. how to remove properties via mapped type in TypeScript
  18. Typescript Unions based on property inside nested object
  19. typings vs @types NPM scope
  20. Extending global types (e.g. “Window”) inside a typescript module
  21. How do I decide whether @types/* goes into `dependencies` or `devDependencies`?
  22. Narrowing a return type from a generic, discriminated union in TypeScript
  23. Angular 2 @ViewChild annotation returns undefined
  24. Does Typescript support the ?. operator? (And, what’s it called?)
  25. How to undestand relations between types any, unknown, {} and between them and other types?
  26. How can moment.js be imported with typescript?
  27. Accessing properties in union types
  28. Angular 2 loader on each http request
  29. Typescript: type narrowing not working for `in` when key is stored in a variable
  30. Run factory function on import in TypeScript?

Leave a Comment