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.

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.

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

Is there a solution for the error "Unable to persist the session" in a Next.js application that utilizes Supabase, Zustand, and Clerk.dev for authentication?

How to showcase the date in a unique format using Angular

Implementing a GIF loader in your webpack configuration for a Typescript/React/Next.js application

What could be causing my TSC to constantly crash whenever I try to utilize MUI props?

Creating a Variety of Files in the Angular Compilation Process

Unable to globally override the default font in MUI theme

Effortless transfer of a module from one TypeScript file to another

Tips for preventing Angular from requiring an additional tag for a child component

What could be causing the issues with SSL certificates when using Node.js/Express-TypeScript?

Is the validity of the expression !args.value || args.value.length true?

Creating folders and writing data to text files in Angular 4/5 with TypeScript: A tutorial

Removing a targeted element from an array in Angular

Upon upgrading to Angular 8, the function this._delegate.setNgStyle is not recognized

Trigger a method within a component when there is a change in the Vuex state

Tips for displaying real-time data and potentially selecting alternative options from the dropdown menu

Learn the process of adjusting the Time Zone in Angular2-HighCharts!

Encountering a issue while running npm start with Angular 2 RC build

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

Tips for applying personalized CSS to individual Toast notifications in Angular

Incorporating a CSS Module into a conditional statement