Is there a way to preserve the original index signature of an object while also defining the type of its values?

Question

Is there a way to preserve the original index signature of an object while also defining the type of its values?

I have a large object containing various animals with different characteristics. I'm looking to properly type this object in TypeScript.

interface Animal {
    legs: 0 | 1 | 2 | 3 | 4;
}

const Animals: Record<string, Animal> = {
    snake: { legs: 0 },
    dog: { legs: 4 },
    bird: { legs: 2},
    // many more entries...
};

If I define the object as Record<string, Animal>, all strings are allowed as keys, leading to potential mistakes like Animals.birb. Restricting the keys manually with something like

Record<"snake" | "dog" | "bird" ... , Animal>

for every key isn't practical due to the size of the object.

Without explicit typing, TypeScript defaults to inferring the type as

{ snake: { legs: number}, dog: { legs: number}, ... }

.

This is problematic because it doesn't capture the essence of an animal being of type Animal and not just any object with a numeric property legs,

The ideal type declaration would be

{ snake: Animal, dog: Animal, ... }

Mentioning as Animal for each entry seems cumbersome.

Is there a more efficient way to precisely type this object?

typescript typescript-types

Answer 1

Answer №1

If you wish to confirm that a variable can be assigned to a specific type without explicitly stating that type and potentially losing valuable information (such as specific keys), you have the option to utilize the satisfies operator:

const Animals = {
    snake: { legs: 0 },
    dog: { legs: 4 },
    bird: { legs: 2 },
} satisfies Record<string, Animal>;

/* const Animals: {
    snake: {
        legs: 0;
    };
    dog: {
        legs: 4;
    };
    bird: {
        legs: 2;
    };
} */

You can observe that Animals has now been deduced with known keys and properties containing legs values of precise literal types, rather than the broader number type that would have been inferred otherwise.

This approach is also effective in identifying errors in your initializer similar to using an annotation:

const badAnimals = {
    snake: { legs: 0 },
    dog: { legs: 4 },
    bird: { legs: 2 },
    octopus: { legs: 8 } // error!
} satisfies Record<string, Animal>;

Link to Playground showcasing the code

Answer 2

If you wish to confirm that a variable can be assigned to a specific type without explicitly stating that type and potentially losing valuable information (such as specific keys), you have the option to utilize the satisfies operator:

const Animals = {
    snake: { legs: 0 },
    dog: { legs: 4 },
    bird: { legs: 2 },
} satisfies Record<string, Animal>;

/* const Animals: {
    snake: {
        legs: 0;
    };
    dog: {
        legs: 4;
    };
    bird: {
        legs: 2;
    };
} */

You can observe that Animals has now been deduced with known keys and properties containing legs values of precise literal types, rather than the broader number type that would have been inferred otherwise.

This approach is also effective in identifying errors in your initializer similar to using an annotation:

const badAnimals = {
    snake: { legs: 0 },
    dog: { legs: 4 },
    bird: { legs: 2 },
    octopus: { legs: 8 } // error!
} satisfies Record<string, Animal>;

Link to Playground showcasing the code

Is there a way to preserve the original index signature of an object while also defining the type of its values?

Answer №1

Similar questions

Extract the ID from the Router's URL

activeStyle is not a valid property for type 'IntrinsicAttributes'

What responsibilities do the TypeScript configuration files assume once a Vue project has been created?

React TSX file not recognizing JSON data stored in an HTML data attribute

Tips for efficiently deconstructing JSON arrays, objects, and nested arrays

The error message "Cannot send headers after they have already been sent to the client" is caused by attempting to set headers multiple

Prisma Hack: excluding properties in type generation

Incoming information obtained via Websocket

What is the method for launching Chrome synchronously in Selenium WebDriver using createSession()?

What are the steps to display a fallback route with TypeScript in Angular 6?

The term "Movie" is not compatible as a JSX component

Struggling with creating a generic TypeScript structure?

Type errors in NextJS are not being displayed when running `npm run dev`

Building a dropdown menu component in react native

Prevent Angular from automatically scrolling to the top when subscribing to a timer

Struggling to create a functioning toggle button using jQuery in a React application

What is the best way to select types conditionally based on the presence of a property in another type?

How can I verify the value of a class variable in TypeScript by using a method?

Tips on creating a unit test for validating errors with checkboxes in your code base

Is it possible to update input form fields in an Angular application?