Utilizing Typescript to extract type information from both keys and values of an object

Question

Utilizing Typescript to extract type information from both keys and values of an object

I have a unique challenge of mapping two sets of string values from one constant object to another. The goal is to generate two distinct types: one for keys and one for values.

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

Deriving the type for keys is straightforward:

type Keys = keyof typeof KeyToVal;

However, I am facing difficulty in defining a compile-time type for the values. Various attempts such as the following were made:

type Values = typeof KeyToVal[Keys];
type Values<K> = K extends Keys ? (typeof KeyToVal)[K] : never;
type Prefix<
    K extends Keys = Keys, 
    U extends { [name: string]: K } = { [name: string]: K }
> = {[V in keyof U]: V}[K];

All these approaches resulted in Values being inferred as string. Adapting solutions from similar questions like the one at How to infer typed mapValues using lookups in typescript? did not yield the desired outcome, indicating either misapplication of those solutions or lack of alignment with my specific scenario.

typescript typescript-typings

Answer 1

Answer №1

If specific conditions are not met, the compiler will automatically widen string literal types to string. However, there are exceptions which are explained in detail on GitHub issues and PR, or you can use a const assertion for literal values. Const assertions were introduced 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 version 3.4, there was a workaround to achieve the same effect. To make the compiler infer literal types, you needed to pass your object through a function with carefully designed generic type parameters. The following function seemed to work well for this purpose:

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

The main goal of this function is to retain and preserve types for better type inference. It may seem pointless otherwise, but by using it, you can get:

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

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

Answer 2

If specific conditions are not met, the compiler will automatically widen string literal types to string. However, there are exceptions which are explained in detail on GitHub issues and PR, or you can use a const assertion for literal values. Const assertions were introduced 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 version 3.4, there was a workaround to achieve the same effect. To make the compiler infer literal types, you needed to pass your object through a function with carefully designed generic type parameters. The following function seemed to work well for this purpose:

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

The main goal of this function is to retain and preserve types for better type inference. It may seem pointless otherwise, but by using it, you can get:

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

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

Answer 3

Answer №2

To improve the KeyToVal, make sure to include the following declaration:

const KeyToVal = {
    MyKey1: 'myValue1',
    MyKey2: 'myValue2',
} as const; // <----- remember to add the <as const> here

Next, define the keys types:

type Keys = keyof typeof KeyToVal;

Finally, create the value types:

type ValuesTypes = typeof KeyToVal[Keys];

Answer 4

To improve the KeyToVal, make sure to include the following declaration:

const KeyToVal = {
    MyKey1: 'myValue1',
    MyKey2: 'myValue2',
} as const; // <----- remember to add the <as const> here

Next, define the keys types:

type Keys = keyof typeof KeyToVal;

Finally, create the value types:

type ValuesTypes = typeof KeyToVal[Keys];

Answer 5

Answer №3

If you are attempting to deduce the type based on the object (which has the potential for numerous keys and values), one approach is to define the type (or perhaps an interface) first, and then ascertain the Keys and Values in this manner:

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";

This method will provide correct syntax highlighting in your IDE.

https://i.sstatic.net/fDwpG.png

Answer 6

If you are attempting to deduce the type based on the object (which has the potential for numerous keys and values), one approach is to define the type (or perhaps an interface) first, and then ascertain the Keys and Values in this manner:

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";

This method will provide correct syntax highlighting in your IDE.

https://i.sstatic.net/fDwpG.png

Answer 7

Answer №4

Although the concept is similar, you can create a type from an array of objects by extracting values from a specific property. Here's an example:

const idToNameArray = [
  { id: '001', name: 'John' },
  { id: '002', name: 'Jane' }
] as const;
type IDs = typeof idToNameArray[number]['id']; // '001' | '002'

Answer 8

Although the concept is similar, you can create a type from an array of objects by extracting values from a specific property. Here's an example:

const idToNameArray = [
  { id: '001', name: 'John' },
  { id: '002', name: 'Jane' }
] as const;
type IDs = typeof idToNameArray[number]['id']; // '001' | '002'

Answer 9

Answer №5

While this may not be directly related, I stumbled upon this question while trying to create a type based on an object or array. For those in a similar situation, consider using enums for this purpose:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

To learn more about enums, check out the documentation here and a tutorial here.

You can now utilize this enum as a type:

type Props = {
  direction: Direction
}

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

}

Integrate it into your components like so:

<Component direction={Direction.top} />

Answer 10

While this may not be directly related, I stumbled upon this question while trying to create a type based on an object or array. For those in a similar situation, consider using enums for this purpose:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

To learn more about enums, check out the documentation here and a tutorial here.

You can now utilize this enum as a type:

type Props = {
  direction: Direction
}

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

}

Integrate it into your components like so:

<Component direction={Direction.top} />

Utilizing Typescript to extract type information from both keys and values of an object

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Why is it that I have intellisense enabled for .js files but not for .ts files?

How can you verify the correctness of imports in Typescript?

Having trouble triggering a change event within a React component?

Converting JavaScript object data to x-www-form-urlencoded: A step-by-step guide

What could be causing the React text input to constantly lose focus with every keystroke?

Resolving Hot-Reload Problems in Angular Application Following Upgrade from Previous Version to 17

What is the best way to navigate through this array within my nextjs/typescript/fetch application?

Angular ngModel not updating both directions in data binding

Conflicts arise when trying to create several objects with different material types in ThreeJS within the

Limit the type to be used for a particular object key in TypeScript

The 'Subscription' type does not contain the properties _isScalar, source, operator, lift, and several others that are found in the 'Observable<any>' type

Enhance the visual appeal of your data sorting bar chart in Highcharts by incorporating dynamic animations

"Element of design focused on style and arrangement

Incorporating quotes into a unified npm script

Achieving TypeScript strictNullChecks compatibility with vanilla JavaScript functions that return undefined

What steps can I take to eliminate the overload error that occurs when I extend the Request object in Express?

What are the steps to executing a function that instantiates an object?

Utilize TypeScript enum keys to generate a new enum efficiently

Result of Mongodb aggregation operation

Having difficulty reaching the specified route ID in Angular app