Creating a type definition for an object literal constant with intricate property types

Question

Creating a type definition for an object literal constant with intricate property types

I am looking to create a constant object literal in TypeScript with a long list of properties all having the same type. Here is an example definition with only three properties:

type ContainerSize = {
  height: string;
  width: string;
  threshold?: number;
};

const CONTAINER_SIZES = {
  '/': { height: '65px', width: '220px' },
  '/info': { height: '220px', width: '220px' },
  default: { height: '700px', width: '500px', threshold: 480 },
} as const;

The downside of the current setup is that the property types are not explicitly defined as ContainerSize. One way to fix this is by using

Record<string, ContainerSize>

as the object type:

const CONTAINER_SIZES: Record<string, ContainerSize> = {
  '/': { height: '65px', width: '220px' },
  '/info': { height: '220px', width: '220px' },
  default: { height: '700px', width: '500px', threshold: 480 },
} as const;

However, this approach allows any string as a valid key, leading to situations where accessing non-existing keys like CONTAINER_SIZES['not-existing'] won't throw an error.

Is there a better way to define the object literal without duplicating the properties, similar to the example below?

const CONTAINER_SIZES: Record<'/' | '/info' | 'default', ContainerSize> = {
  '/': { height: '65px', width: '220px' },
  '/info': { height: '220px', width: '220px' },
  default: { height: '700px', width: '500px', threshold: 480 },
} as const;

typescript

Answer 1

Answer №1

Consider these two options:

Derive the keys by declaring the object separately first
Use a dummy function that simply returns ContainerSize

Key inference from previous object

Although it should ideally be achievable in one step, here's how you can accomplish it using two steps:

const _sizes = {
    '/': { height: '65px', width: '220px' },
    '/info': { height: '220px', width: '220px' },
    default: { height: '700px', width: '500px', threshold: 480 },
} as const;
const CONTAINER_SIZES: Record<keyof typeof _sizes, ContainerSize> = _sizes;

Playground link

As you correctly pointed out (thank you!), this approach loses the read-only aspect of the property values (both for CONTAINER_SIZE's properties and the values of the ContainerSize objects), which can be rectified with Readonly in two instances:

const CONTAINER_SIZES: Readonly<Record<keyof typeof _sizes, Readonly<ContainerSize>>> = _sizes;

Playground link

A null function option

An alternative method I have utilized when enforcing ContainerSize is needed while inputting the values is to implement a do-nothing function:

const cs = (size: ContainerSize) => size;

Subsequently:

const CONTAINER_SIZES = {
    '/':      cs({ height: '65px', width: '220px' }),
    '/info':  cs({ height: '220px', width: '220px' }),
    default:  cs({ height: '700px', width: '500px', threshold: 480 }),
};

This allows for autocompletion of property names within the object literals passed into cs. (In one project where I employed this technique, I realized the need to incorporate cross-property verification logic into the function, thus it no longer remained entirely redundant...)

Playground link

Answer 2

Consider these two options:

Derive the keys by declaring the object separately first
Use a dummy function that simply returns ContainerSize

Key inference from previous object

Although it should ideally be achievable in one step, here's how you can accomplish it using two steps:

const _sizes = {
    '/': { height: '65px', width: '220px' },
    '/info': { height: '220px', width: '220px' },
    default: { height: '700px', width: '500px', threshold: 480 },
} as const;
const CONTAINER_SIZES: Record<keyof typeof _sizes, ContainerSize> = _sizes;

Playground link

As you correctly pointed out (thank you!), this approach loses the read-only aspect of the property values (both for CONTAINER_SIZE's properties and the values of the ContainerSize objects), which can be rectified with Readonly in two instances:

const CONTAINER_SIZES: Readonly<Record<keyof typeof _sizes, Readonly<ContainerSize>>> = _sizes;

Playground link

A null function option

An alternative method I have utilized when enforcing ContainerSize is needed while inputting the values is to implement a do-nothing function:

const cs = (size: ContainerSize) => size;

Subsequently:

const CONTAINER_SIZES = {
    '/':      cs({ height: '65px', width: '220px' }),
    '/info':  cs({ height: '220px', width: '220px' }),
    default:  cs({ height: '700px', width: '500px', threshold: 480 }),
};

This allows for autocompletion of property names within the object literals passed into cs. (In one project where I employed this technique, I realized the need to incorporate cross-property verification logic into the function, thus it no longer remained entirely redundant...)

Playground link

Creating a type definition for an object literal constant with intricate property types

Answer №1

Key inference from previous object

A null function option

Similar questions

After a loop, a TypeScript promise will be returned

Discover a method to deselect a checkbox within a separate component in angular15

Obtain a value that is not defined

Exploring Recursive Types in TypeScript

I'm looking to locate the API documentation for AngularJS TypeScript

Different ways to handle dialogs in React with TypeScript

Discovering the class type in TypeScript

Tips for efficiently utilizing Hooks with React Context:

Encountering incorrect month while utilizing the new Date() object

Tips on incorporating express-mysql-session in a TypeScript project

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

Error: Unable to locate module: Could not find 'react-server-dom-webpack/client.edge'

Is there a way to verify if an object adheres to a specified interface?

Returning a 'never' type from a function in React using Typescript

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

"Encountered an error: Unable to interpret URL from (URL).vercel.app/api/getMessages" while deploying Next.js 13 using TypeScript on Vercel

Download pictures from swift into typescript with the help of share extensions

Ditching the subscribe(...) method in Angular by opting to return a string value instead of an

Navigating the proper utilization of exports and subpaths in package.json with TypeScript

How to assign attributes to all child elements in Angular?