Types from both keys and values of object in Typescript

Question

I have two sets of string values that I want to map from one to the other as a constant object. I want to generate two types from that mapping: one for keys and one for val

Answer 1

You are trying to infer the type from the object (which can have any number of keys/values). You can try to describe the type (or maybe better an interface) first and then infer Kyes and Values like so:

type KeyToObjMap = {
  some: "other",
  more: "somemore",
};

type Keys = keyof KeyToObjMap;

type Values = KeyToObjMap[Keys];

let one: Values = "some";
let two: Values = "other";
let three: Keys = "some";
let four: Values = "somemore";
let five: Keys = "fun";

And you will have a correct highlight in IDE.

Answer 2

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"

Answer 3

I know that it may not be related, but for my usecase, I reached this question because I wanted to create a type based on an object or array. So I just thought it may be useful for someone with the same usecase reaching this question to use enums: You can simply define an enum like this:

enum Arrow {
  Up,
  Down,
  Left,
  Right
}

You can read more about them here and here.

You can now use this enum as a type:

type Props = {
  arrow: Arrow
}

const Component = (props: Props) => {
  switch(props.arrow) {
    case Arrow.Up:
      // go-up
    case Arrow.Down:
      // go-down
    ...
  }

}

and you can use it in your components:

  <Component arrow={Arrow.top} />