Achieving the desired type of value within a nested record

Question

Achieving the desired type of value within a nested record

I am trying to create a unique function that can manipulate values of a nested Record, based on the collection name. However, in my current implementation, I am facing difficulty in attaining the value type:

type Player = { name:string }
type Point = { x:number, y:number }


const collections = {
    players: {} as Record<string, Player>,
    positions: {} as Record<string, Point>,
}

type Collections = typeof collections;


function handleEntity<
    Key extends keyof Collections,
    Col extends Collections[Key],
    Val extends Col[keyof Col],
>(name:Key, value:Val){
    switch(name){
        case 'positions': value.x++ // <-- Not valid :(
    }
}

Can you tell me why TypeScript is not able to infer Val in this scenario? Is there any possible workaround?

typescript generics

Answer 1

Answer №1

The TypeScript compiler sometimes struggles to accurately narrow down the types of generically typed variables. While the relationship between name and value is recognized by the compiler during function calls, narrowing the type of value based on name within the implementation is currently not feasible, especially when name and value are generic types.

To address this issue, one approach is to remove the generic types and establish a union type for the parameters.

function handleEntity(...[name, value]: { 
    [K in keyof Collections]: [K, Collections[K][keyof Collections[K]]] 
  }[keyof Collections]
){
    switch(name){
        case 'positions': value.x++ // type narrowed successfully :)
    }
}

handleEntity("players", { name: "abc" })
handleEntity("positions", { x: 1, y: 0 })

By treating the name, value tuple as a discriminated union, the compiler can effectively narrow down the type of value by examining the value of name.

If it's necessary for handleEntity to remain generic, you can include the generic signature as an overload.

function handleEntity<
    Key extends keyof Collections,
    Col extends Collections[Key],
    Val extends Col[keyof Col],
>(name:Key, value:Val): void
function handleEntity(...[name, value]: { 
    [K in keyof Collections]: [K, Collections[K][keyof Collections[K]]] 
  }[keyof Collections]
){
    switch(name){
        case 'positions': value.x++ // type narrowed successfully :)
    }
}

Playground

Answer 2

The TypeScript compiler sometimes struggles to accurately narrow down the types of generically typed variables. While the relationship between name and value is recognized by the compiler during function calls, narrowing the type of value based on name within the implementation is currently not feasible, especially when name and value are generic types.

To address this issue, one approach is to remove the generic types and establish a union type for the parameters.

function handleEntity(...[name, value]: { 
    [K in keyof Collections]: [K, Collections[K][keyof Collections[K]]] 
  }[keyof Collections]
){
    switch(name){
        case 'positions': value.x++ // type narrowed successfully :)
    }
}

handleEntity("players", { name: "abc" })
handleEntity("positions", { x: 1, y: 0 })

By treating the name, value tuple as a discriminated union, the compiler can effectively narrow down the type of value by examining the value of name.

If it's necessary for handleEntity to remain generic, you can include the generic signature as an overload.

function handleEntity<
    Key extends keyof Collections,
    Col extends Collections[Key],
    Val extends Col[keyof Col],
>(name:Key, value:Val): void
function handleEntity(...[name, value]: { 
    [K in keyof Collections]: [K, Collections[K][keyof Collections[K]]] 
  }[keyof Collections]
){
    switch(name){
        case 'positions': value.x++ // type narrowed successfully :)
    }
}

Playground

Achieving the desired type of value within a nested record

Answer №1

Similar questions

Decoding enum interface attribute from response object in Angular 4 using typescript

Strategies for effectively choosing this specific entity from the repository

What is the best way to treat each TS file as its own independent module?

Encountering an error message that says "ERROR TypeError: Cannot read property 'createComponent' of undefined" while trying to implement dynamic components in Angular 2

Using Angular Form Builder to assign a value depending on the selected option in a dropdown menu

The bespoke node package does not have an available export titled

What is the best way to download a file with a specific name using Angular and TypeScript?

Creating dynamic dxi-column with different data types in dxDataGrid

Angular: accomplish cascading requests to achieve desired outcomes

"Utilizing the power of Angular 6's JSON pipe

"Dealing with conflicts between RMQ and TypeORM in a NestJS

Retrieving attributes by their names using dots in HTML

Shifting attention to an angular 6 form field

Using promises in TypeScript index signature

Angular 6 offers a versatile multi-select dropdown feature

What steps can I take to fix error TS7015 in my TypeScript, Next.js, and React application when I encounter an index expression that is not a number data type?

Tips for effectively utilizing the drag and drop feature with the Table Component in Ant Design

Is it necessary for the React generic type prop to be an extension of another type

Enable users to designate custom methods as either asynchronous or synchronous

Explanation on How to utilize the $( document ).ready() jQuery function within the ngAfterViewInit() on a Component class using Angular 2