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

Utilizing Angular's ngx-bootstrap date range picker for a customized date range filtering system

What's the best way to implement satisfies with a generic type?

What could be the reason for encountering a Typescript ts(2345) error while trying to pass a mocked constant to .mockResolvedValue()?

Limit users to entering either numbers or letters in the input field

Sanity.io's selection of schema field types for efficient and convenient

Vue.js 3 with TypeScript is throwing an error: "Module 'xxxxxx' cannot be located, or its corresponding type declarations are missing."

Failed deployment of a Node.js and Express app with TypeScript on Vercel due to errors

Encountered Error: Unknown property 'createStringLiteral', causing TypeError in the Broken Storyshots. This issue is happening while using version ^8.3.0 of jest-preset-angular

Design a model class containing two arrow functions stored in variables with a default value

How to access the result without using subscribe in Angular?

"Utilize a callback function that includes the choice of an additional second

Issue when transferring properties of a component to a component constructed Using LoadingButton MUI

When executing the release command in Ionic 3, the Angular AoT build encountered a failure

Troubleshooting TypeScript: Issues with Object.assign and inheritance

Using useState as props in typescript

A guide on utilizing Material UI Fade for smoothly fading in a component when a text field is selected

Is it possible to use conditional logic on child elements in formkit?

Creating custom observables by utilizing ViewChildren event and void functions in Angular 12: A step-by-step guide

Is Angular 9's default support for optional chaining in Internet Explorer possible without the need for polyfill (core-js) modifications with Typescript 3.8.3?

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend