Creating a key-constrained type in Typescript for object literals with automatically deduced number values

Question

Creating a key-constrained type in Typescript for object literals with automatically deduced number values

Suppose we have an object literal defined as:

export const SOURCE = {
    UNKNOWN: 'Unknown',
    WEB: 'Web',
    MOBILE: 'Mobile',
    ...
} as const;

and

export const OTHER_SOURCE = {
    UNKNOWN: 0,
    WEB: 1,
    MOBILE: 2, // values may not be sequential or incrementing 
    ...
} as const;
OTHER_SOURCE.UNKNOWN // inferred as 0

Is there a way to restrict the second object literal so that it uses keys from SOURCE but keeps the values as literals, instead of numbers like in the example below:

type ConstraintType = {
    [key in keyof typeof USER_SOURCE]: number; // how can we infer (and possibly enforce numeric values) from the second object?
};
export const OTHER_SOURCE: ConstraintType = { ... } as const;
OTHER_SOURCE.UNKNOWN // inferred as a number ]

Appreciate any assistance and explanations.

typescript typescript-typings type-inference typescript-generics literals

Answer 1

Answer №1

When you declare the type of a variable, it becomes its final type. As long as the expression on the right can be assigned to it, everything is good.

If you wish to extract the types from the object literal assigned to OTHER_SOURCE and also ensure it has the same properties, you can utilize a function

export const SOURCE = {
    UNKNOWN: 'Unknown',
    WEB: 'Web',
    MOBILE: 'Mobile',
} as const;

function makeSource<T extends Record<keyof typeof SOURCE, V>, V extends number>(o: T): Readonly<T> {
  return o
}
const OTHER_SOURCE = makeSource( {
    UNKNOWN: 0,
    WEB: 1,
    MOBILE: 2, // values might not necessarily be sequential or incrementing  
});


OTHER_SOURCE.UNKNOWN // 1

Playground Link

Answer 2

When you declare the type of a variable, it becomes its final type. As long as the expression on the right can be assigned to it, everything is good.

If you wish to extract the types from the object literal assigned to OTHER_SOURCE and also ensure it has the same properties, you can utilize a function

export const SOURCE = {
    UNKNOWN: 'Unknown',
    WEB: 'Web',
    MOBILE: 'Mobile',
} as const;

function makeSource<T extends Record<keyof typeof SOURCE, V>, V extends number>(o: T): Readonly<T> {
  return o
}
const OTHER_SOURCE = makeSource( {
    UNKNOWN: 0,
    WEB: 1,
    MOBILE: 2, // values might not necessarily be sequential or incrementing  
});


OTHER_SOURCE.UNKNOWN // 1

Playground Link

Creating a key-constrained type in Typescript for object literals with automatically deduced number values

Answer №1

Similar questions

Capturing user audio on the client side with Angular

Validating Forms in TypeScript

NestJS endpoint throwing a 500 error after submitting a post request

Unable to build due to TypeScript Firebase typings not being compatible

Tips for effectively transferring data between components in Angular 2

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Utilizing the String Enum for mapping an interface with an index

Switch between active tabs (Typescript)

Should the PHP interface be exported to a Typescript interface, or should it be vice versa?

Implementing validation logic on button click using TypeScript

AWS Amplify is failing to maintain the user session post a successful login

Is there a marble experiment that will alter its results when a function is executed?

Exploring the functionality of the `super()` method in TypeScript

What is the best way to create buttons corresponding to the total number of "postId" properties in an array retrieved from an API call in Angular 10 using the "ngFor" directive?

TS - Custom API hook for making multiple API requests - incompatible type with 'IUseApiHook'

What is the best way to simulate a constructor-created class instance in jest?

Calculate the total values across a row of a work schedule, based on specific conditions

Disabling FormArray on-the-fly in Angular

Using Angular 4 to retrieve a dynamic array from Firebase

Choose a single asset from the list of values stored in the Map