What is preventing a mapped type from completely resolving a lookup with a generic yet finite key?

Question

What is preventing a mapped type from completely resolving a lookup with a generic yet finite key?

Let's break down the issue at hand:

type Animal = 'dog' | 'cat';

type AnimalSound<T extends Animal> = T extends 'dog'
    ? 'woof'
    : T extends 'cat'
    ? 'meow'
    : never;

const animalSoundMap: {[K in Animal]: AnimalSound<K>} = {
    dog: 'woof',
    cat: 'meow',
};

const lookupSound = <T extends Animal>(animal: T): AnimalSound<T> => {
    const sound = animalSoundMap[animal];
    return sound; 
}

Try it yourself here!

The line with return is throwing an error; apparently, the type of the sound variable is resolved as 'woof' | 'meow', rather than being strictly typed as AnimalSound<T> like one might expect. This raises the question - why isn't the typechecker happy about this?

typescript

Answer 1

Answer №1

To keep TypeScript satisfied, I recommend sticking with @T.J. Crowder's solution or trying out this alternative approach:

type Pet = 'dog' | 'cat';

type PetSound<T extends Pet> = T extends 'dog'
    ? 'woof'
    : T extends 'cat'
    ? 'meow'
    : never;

const petSoundMap: { [K in Pet]: PetSound<T> } = {
    dog: 'woof',
    cat: 'meow',
};

const findPetSound = <
    PetName extends Pet,
    PetDictionary extends { [Name in PetName]: PetSound<Name> }
>(dictionary: PetDictionary, pet: PetName):
    PetDictionary[PetName] =>
    dictionary[pet]

If you want to automatically deduce the return type, consider including it in the function arguments dictionary. Playground

You can let TypeScript infer the return type from the function body without explicitly defining it:

const findPetSound = <T extends Pet>(pet: T) => {
    const sound = petSoundMap[pet];

    return sound;
}

const result = findPetSound('cat') // "meow"

Conditional types may not behave as expected when used as a return type directly. Consider using conditional types in function overloading instead:

function findPetSound<T extends Pet>(pet: T): PetSound<T>
function findPetSound<T extends Pet>(pet: T) {
    const sound = petSoundMap[pet];
    return sound;
}

Answer 2

To keep TypeScript satisfied, I recommend sticking with @T.J. Crowder's solution or trying out this alternative approach:

type Pet = 'dog' | 'cat';

type PetSound<T extends Pet> = T extends 'dog'
    ? 'woof'
    : T extends 'cat'
    ? 'meow'
    : never;

const petSoundMap: { [K in Pet]: PetSound<T> } = {
    dog: 'woof',
    cat: 'meow',
};

const findPetSound = <
    PetName extends Pet,
    PetDictionary extends { [Name in PetName]: PetSound<Name> }
>(dictionary: PetDictionary, pet: PetName):
    PetDictionary[PetName] =>
    dictionary[pet]

If you want to automatically deduce the return type, consider including it in the function arguments dictionary. Playground

You can let TypeScript infer the return type from the function body without explicitly defining it:

const findPetSound = <T extends Pet>(pet: T) => {
    const sound = petSoundMap[pet];

    return sound;
}

const result = findPetSound('cat') // "meow"

Conditional types may not behave as expected when used as a return type directly. Consider using conditional types in function overloading instead:

function findPetSound<T extends Pet>(pet: T): PetSound<T>
function findPetSound<T extends Pet>(pet: T) {
    const sound = petSoundMap[pet];
    return sound;
}

Answer 3

Answer №2

It appears that the issue at hand arises from AnimalSound<T> being a conditional type, with Typescript resolving conditional types after other types; especially when T extends ... utilizes a type parameter, it remains unresolved until T is linked to a concrete type. Hence, within the function where T is merely a formal type parameter, it cannot process AnimalSound<T> as desired.

To resolve this, I suggest aligning the type of animalSoundMap with the one you intend to use:

type AnimalSoundMap = {[K in Animal]: AnimalSound<K>}

const animalSoundMap: AnimalSoundMap = {
    dog: 'woof',
    cat: 'meow',
};

const lookupSound = <T extends Animal>(animal: T): AnimalSoundMap[T] => {
    return animalSoundMap[animal];
}

Playground Link

You might find it more efficient to define them in reverse order, so that Animal and AnimalSound<T> are derived from AnimalSoundMap, rather than the opposite. This way, you achieve correct behavior for AnimalSound<T> when T is a formal type parameter, and also eliminate redundancy by defining the types based on the value of animalSoundMap (instead of using the types to validate the value).

const animalSoundMap = {
    dog: 'woof',
    cat: 'meow',
};

type AnimalSoundMap = typeof animalSoundMap
type Animal = keyof AnimalSoundMap
type AnimalSound<T extends Animal> = AnimalSoundMap[T]

Playground Link

Answer 4

It appears that the issue at hand arises from AnimalSound<T> being a conditional type, with Typescript resolving conditional types after other types; especially when T extends ... utilizes a type parameter, it remains unresolved until T is linked to a concrete type. Hence, within the function where T is merely a formal type parameter, it cannot process AnimalSound<T> as desired.

To resolve this, I suggest aligning the type of animalSoundMap with the one you intend to use:

type AnimalSoundMap = {[K in Animal]: AnimalSound<K>}

const animalSoundMap: AnimalSoundMap = {
    dog: 'woof',
    cat: 'meow',
};

const lookupSound = <T extends Animal>(animal: T): AnimalSoundMap[T] => {
    return animalSoundMap[animal];
}

Playground Link

You might find it more efficient to define them in reverse order, so that Animal and AnimalSound<T> are derived from AnimalSoundMap, rather than the opposite. This way, you achieve correct behavior for AnimalSound<T> when T is a formal type parameter, and also eliminate redundancy by defining the types based on the value of animalSoundMap (instead of using the types to validate the value).

const animalSoundMap = {
    dog: 'woof',
    cat: 'meow',
};

type AnimalSoundMap = typeof animalSoundMap
type Animal = keyof AnimalSoundMap
type AnimalSound<T extends Animal> = AnimalSoundMap[T]

Playground Link

What is preventing a mapped type from completely resolving a lookup with a generic yet finite key?

Answer №1

Answer №2

Similar questions

Guide on running PHP (WAMP Server) and Angular 2 (Typescript with Node.js) concurrently on a local PC

Guide to create a React component with passed-in properties

Angular5 - Modify a public variable using an intercept in a static service

Resolve the type of the combineLatest outcome in RxJS

Tips for eliminating nested switchMaps with early returns

Combining Firebase analytics with an Ionic 3 application using the Ionic Native plugin

Efficiently sending data to Service Bus from an HTTP-triggered function

Prohibit using any as an argument in a function if a generic type is

What is the best way to handle API requests within an Angular component?

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

Introducing a detailed model showcasing information sourced from an array of objects within Angular 14

Encountering the error message "Type '{ theme: Theme; }' is not compatible with type" while attempting to pass it as a prop to the App component

Experiencing difficulties with the mat-card component in my Angular project

To populate an Ionic list with items, push strings into the list using the InfiniteScroll feature

Tips for inserting a hyperlink into a Chakra UI toast

I am currently struggling with a Typescript issue that I have consulted with several individuals about. While many have found a solution by upgrading their version, unfortunately, it

Changing the Angular 5 ng-bootstrap Modal Dialog template dynamically in real-time

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

What is the best way to customize the styles of Material UI V5 Date Pickers?

What kind of registration does React Hook Form use?