The identifier "id" is not a valid index for this type

Question

The identifier "id" is not a valid index for this type

The code snippet below demonstrates the similarities and differences between the functions addThingExample2 and addThing. While addThingExample2 directly uses the union type Things, addThing utilizes a generic parameter THING extends Thing.

The expression

PropsMapper<Things>[TYPE]['id']

is valid and does not produce any type errors.

In contrast,

PropsMapper<THING>[TYPE]['id']

generates a type error stating that "

Type '"id"' cannot be used to index type 'PropsMapper<THING>[TYPE]'.

"

I am seeking a solution to enable the compilation of the addThing function without encountering any type errors.

type AllowedThingType = 'Smartphone' | 'Toy' | 'Magazine';

// Rest of the code goes here...

Link to TS Playground

typescript typescript-generics

Answer 1

Answer №1

I discovered a unique workaround that may seem a bit unconventional. The end result is the same, but we are essentially outsmarting the compiler by convincing it that we are providing the correct key (which we already are, but now we are confirming it).

class ItemsRepository<ITEM extends Item> {
    addItem<TYPE extends keyof PropsMapper<ITEM>, T extends keyof PropsMapper<ITEM>[TYPE] & "id", U extends keyof PropsMapper<ITEM>[TYPE] & "props">(
        type: TYPE,
        id: PropsMapper<ITEM>[TYPE][T],
        props: PropsMapper<ITEM>[TYPE][U]
    ) {
        // ...
    }
}

Interactive Playground

Answer 2

I discovered a unique workaround that may seem a bit unconventional. The end result is the same, but we are essentially outsmarting the compiler by convincing it that we are providing the correct key (which we already are, but now we are confirming it).

class ItemsRepository<ITEM extends Item> {
    addItem<TYPE extends keyof PropsMapper<ITEM>, T extends keyof PropsMapper<ITEM>[TYPE] & "id", U extends keyof PropsMapper<ITEM>[TYPE] & "props">(
        type: TYPE,
        id: PropsMapper<ITEM>[TYPE][T],
        props: PropsMapper<ITEM>[TYPE][U]
    ) {
        // ...
    }
}

Interactive Playground

The identifier "id" is not a valid index for this type

Answer №1

Similar questions

Display sub-objects within Chart.js

The access to the HTTP response object is not possible: the property is not found on the Object type

Why am I receiving the error message "Argument of type 'number' is not assignable to parameter of type 'never'?"

What is the best way to implement useAsync (from the react-async-hook library) using TypeScript?

Creating object types in typescript from object keys: a step-by-step guide

What is the method for extracting children from a singular object in json-server rather than an array?

Retrieve an instance of the property class within a property decorator

Incorporating an external module into your Angular application for local use

In a scenario where a specific element is disabled, how can I link its value to another related element?

How to send a value to a function in Angular from a different function?

Update the useState function individually for every object within an array

Resolving Modules: Using NPM to Install the Typescript Package Directly from Github

What are the steps for creating a TypeScript version of a custom CKEditor5 build?

The implementation of the data source in ag grid is not functioning

Using Boolean functions in ngStyle allows for dynamic styling of elements in Angular templates

Converting TypeScript to ES5 in Angular 2: A Comprehensive Guide

What is the best way to send an array of locationIds to the getLocationData service?

tips for obtaining the highest value among multiple keys within an array

Real-time data not instantly stored using socket.io

Angular: Material Button that Adjusts According to Header Size