Generate a specific mapping for Typescript union to predefined values

Question

Generate a specific mapping for Typescript union to predefined values

In the scenario where I have a type similar to the one below and I aim to associate it with specific values during compile time, I can achieve this by:

type MyType = {
  a: string;
  b: string;
}

const MyMapping: { [k in keyof MyType]: number } = {
  a: 3,
  b: 2,
}

type X = typeof MyMapping['a'] // Output should be 3

Playground Link

Is there a method to apply the same concept to a combination of existing types?

type MyType = {
  a: string;
  b: string;
}

const MyMapping: /* Specialized type here */ = {
  a: 3,
  b: 2,
}

type X = typeof MyMapping['a'] // Expected result is 3

I understand that the approach presented above may not work as-is, but are there alternative formatting techniques to achieve this goal?

typescript types type-definition

Answer 1

Answer №1

To begin with, simplifying {[k in keyof MyType]: number} as

Record<keyof MyType, number>

is a more concise approach, essentially utilizing the predefined mapped type Record.

If you are working with typescript 4.9 or later, leveraging the satisfies operator allows for constraining the variable type while enabling the compiler to deduce the type. When combined with as const to retain the literal types, the desired outcome can be achieved:

const MyMapping = {
  a: 3,
  b: 2,
} as const satisfies Record<keyof MyType, number>

Playground Link

If your TypeScript version is earlier than 4.9, a similar method can be applied using an identity function to facilitate inference while also restricting the type of the object literal:

function makeMap<T extends Record<keyof MyType, V>, V extends number>(o: T & Record<Exclude<keyof T, keyof MyType>, never>) {
  return o
}

const MyMapping = makeMap({
  a: 3,
  b: 2,
  c: 1
})

type X = typeof MyMapping['a'] // 3

https://www.typescriptlang.org/play?ssl=6&ssc=123&pln=6&pc=78#code/C4TwDgpgBAsiAq5oF4oG8CwAoKUCGAXFAM...

The function entails a few key tactics:

The V type parameter forces TypeScript to infer number literals for the values within the object rather than just number
```
Record<Exclude<keyof T, keyof MyType>, never>
```
prevents excess properties, as TypeScript doesn't apply excess property checks when assigning to a type parameter.

Answer 2

To begin with, simplifying {[k in keyof MyType]: number} as

Record<keyof MyType, number>

is a more concise approach, essentially utilizing the predefined mapped type Record.

If you are working with typescript 4.9 or later, leveraging the satisfies operator allows for constraining the variable type while enabling the compiler to deduce the type. When combined with as const to retain the literal types, the desired outcome can be achieved:

const MyMapping = {
  a: 3,
  b: 2,
} as const satisfies Record<keyof MyType, number>

Playground Link

If your TypeScript version is earlier than 4.9, a similar method can be applied using an identity function to facilitate inference while also restricting the type of the object literal:

function makeMap<T extends Record<keyof MyType, V>, V extends number>(o: T & Record<Exclude<keyof T, keyof MyType>, never>) {
  return o
}

const MyMapping = makeMap({
  a: 3,
  b: 2,
  c: 1
})

type X = typeof MyMapping['a'] // 3

https://www.typescriptlang.org/play?ssl=6&ssc=123&pln=6&pc=78#code/C4TwDgpgBAsiAq5oF4oG8CwAoKUCGAXFAM...

The function entails a few key tactics:

The V type parameter forces TypeScript to infer number literals for the values within the object rather than just number
```
Record<Exclude<keyof T, keyof MyType>, never>
```
prevents excess properties, as TypeScript doesn't apply excess property checks when assigning to a type parameter.

Generate a specific mapping for Typescript union to predefined values

Answer №1

Similar questions

Issue with ion-select default value not being applied

Using React Native with TypeScript to Select the Parent and Child Checkboxes within a FlatList

When using the `create-react-app` command with the `--typescript` flag, you may encounter an issue when attempting to compile namespaces with the `--

Resolving the issue of 'type' property missing but required in 'SeriesXrangeOptions' within the Angular Highcharts module

What is the process of attaching a property to every object within an array using TypeScript?

Are there any solutions to refresh a page by clicking a button in next.js?

Difficulty with Angular's Interpolation and incorporating elements

Is it possible to access NgbdModalContent properties from a different component?

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

Using Angular 6 to Format Dates

Elimination of any null value fields upon form submission in Angular 2

TypeScript mandates the inclusion of either one parameter or the other, without the possibility of having neither

What is the best way to restrict the key of an object type to only be within a specific union in TypeScript?

Angular form retains the previous value when saving

Setting `throwIfNamespace=true` in the `.babelrc` file for a `create-react-app` project

Specify the correct type for the SVG component when passing it as a prop

What is the process for integrating a tensorflow.js model into a React-based web application?

Utilizing Google Sheets as a secure, read-only database for Angular applications without the need to make the sheet accessible to the

Creating a Blob or ArrayBuffer in Ionic 2 and Cordova: Step-by-Step Guide

Printing error stack that includes the source from the source map