Describe the TypeScript type for an object with constant keys

Question

Describe the TypeScript type for an object with constant keys

My query resembles the one found in this Typescript interface definition question, but has a slight variation.

I am beginning with an object where the keys are constants:

const KEYS = {
  KEY1: 'hello',
  KEY2: 'world'
} as const;

However, instead of strings, I am using objects as the values. So, I am trying to determine the type of the object within each key. (All object types are the same.) For instance, I would like something along these lines:

const KEYS : {const: string} {
  KEY1: 'hello',
  KEY2: 'world'
} as const;

Is there a way to achieve this? I keep encountering ts2353 error due to the improper appearance of the const keyword. Ideally, I am looking for a one-line solution (i.e., what should replace const: string to make it work) since I have nearly 200 keys and rewriting each const individually as a type is not preferable.

As per jcalz's suggestion, it seems like I need something akin to an "index signature"? I have experimented with various types but have not been able to find a working solution, so I am unsure about my approach.

typescript

Answer 1

Answer №1

It seems like you are in need of an index signature as you may not be aware of all the property names of a type in advance, but you do know the structure of the values associated with those properties. Instead of using {const: string}, consider utilizing {[k: string]: string}, which defines that every property with the key k will have a value of type string. This can also be represented as Record<string, string> by leveraging the Record utility type.

Given your use of a const assertion, it indicates that you prefer to ensure the compiler retains knowledge of the known keys KEY1 and KEY2, as well as the literal types "hello" and "world". In this scenario, instead of defining the index signature explicitly:

const KEYS: { [k: string]: string } = {
  KEY1: 'hello',
  KEY2: 'world'
} as const;

You should simply verify that KEYS adheres to the defined index signature without altering its inferred type. This can be achieved using the satisfies operator:

const KEYS = {
  KEY1: 'hello',
  KEY2: 'world'
} as const satisfies { [k: string]: string };

This approach allows you to maintain the original type of

KEYS</code while ensuring type safety by alerting you to any incorrect property values:</p>
<pre><code>const KEYS = {
  KEY1: 'hello',
  KEY2: 123 // error!
  //~~ <-- Type 'number' is not assignable to type 'string'.
} as const satisfies { [k: string]: string };

Check out the code on Playground for further exploration

Answer 2

It seems like you are in need of an index signature as you may not be aware of all the property names of a type in advance, but you do know the structure of the values associated with those properties. Instead of using {const: string}, consider utilizing {[k: string]: string}, which defines that every property with the key k will have a value of type string. This can also be represented as Record<string, string> by leveraging the Record utility type.

Given your use of a const assertion, it indicates that you prefer to ensure the compiler retains knowledge of the known keys KEY1 and KEY2, as well as the literal types "hello" and "world". In this scenario, instead of defining the index signature explicitly:

const KEYS: { [k: string]: string } = {
  KEY1: 'hello',
  KEY2: 'world'
} as const;

You should simply verify that KEYS adheres to the defined index signature without altering its inferred type. This can be achieved using the satisfies operator:

const KEYS = {
  KEY1: 'hello',
  KEY2: 'world'
} as const satisfies { [k: string]: string };

This approach allows you to maintain the original type of

KEYS</code while ensuring type safety by alerting you to any incorrect property values:</p>
<pre><code>const KEYS = {
  KEY1: 'hello',
  KEY2: 123 // error!
  //~~ <-- Type 'number' is not assignable to type 'string'.
} as const satisfies { [k: string]: string };

Check out the code on Playground for further exploration

Describe the TypeScript type for an object with constant keys

Answer №1

Similar questions

What steps do administrators (coaches) need to take in order to generate a new user (athlete) using Firebase Cloud Functions?

angular 2: how to reset select list values after submission

The side menu fails to appear when pressed

What is the best way to bring in local modules within the browser environment using Playwright?

Issue with Angular 2 pipe causing unexpected undefined result

Angular 7 error: Form control with name property does not have a valid value accessor

Resolving the problem of <Link> error in React with Typescript using react-router-dom

Testing the React context value with React testing library- accessing the context value before the render() function is executed

Initiate a function once the innerHTML content in Angular has been completely loaded

Change a TypeScript alias within the @types namespace

Using TypeScript to specify the return type of a non-mutating extension function from an external module

Step-by-step guide for importing a JSON file in React typescript using Template literal

Determining the appropriate generic type in Typescript

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

`Why are some options missing from the "New Item" feature in Visual Studio?`

Oops! The API request was denied with error code 401 - Unauthorized in React

In Angular Google Maps, here's a step-by-step guide on how to zoom in

Collapsible list in Angular2 sidenav: ensuring only one sublist remains open

Experiencing issues while trying to render a component with dynamic content in Next.js

Encountering "No overload matches this call" error in Typescript while working with fetched data and material-ui