The TypeScript error ts2322 occurs when using a generic constraint that involves keyof T and a

Question

The TypeScript error ts2322 occurs when using a generic constraint that involves keyof T and a

Trying to create a generic class that holds a pair of special pointers to keys of a generic type. Check out an example in this playground demo.

const _idKey = Symbol('_idKey')
const _sortKey = Symbol('_sortKey')

export interface BaseStoreConfig<T, Tid extends keyof T, Tsk extends keyof T | undefined> {
  idKey?: Tid
  sortKey?: Tsk
}

export class BaseStore<T, Tid extends keyof T & string, Tsk extends keyof T | undefined> {
  public [_idKey]: keyof T | 'id'
  public [_sortKey]?: keyof T | undefined

  constructor({
    idKey = 'id', // Errors, see below
    sortKey,
  }: BaseStoreConfig<T, Tid, Tsk>) {
    this[_idKey] = idKey
    this[_sortKey] = sortKey
  }
}

A ts2322 Error is thrown (tried various constraints for Tid, still facing the error)

Type 'string' is not assignable to type 'Tid'.
  'string' can be assigned to 'Tid', but 'Tid' may have a different subtype of 'string'.ts(2322)

Although I grasp the concept of this error, it's puzzling in this scenario. How can a subtype of string not be compatible with this type? Any suggestions on how to define this constraint?

typescript typescript-generics

Answer 1

Answer №1

It appears that Typescript is struggling to handle different types for the same value, such as idKey, depending on whether it is viewed from the caller's perspective (Tid or undefined) or from the implementer's side (Tid or "id"). This issue is similar to others like those reported in microsoft/TypeScript#42053. However, the timeline for resolving these bugs remains uncertain.

The constructor parameter is annotated as

BaseStoreConfig<T, Tid, Tsk>

, where the idKey property is of type Tid | undefined. When attempting to assign a default value of "id" to it, the compiler flags it as an error due to the mismatch between "id" and Tid. The change in TypeScript behavior post version 3.9 results in an error mentioning string rather than specifically "id". Reverting to version 3.9 reveals an explicit error referencing "id".

A possible solution might be to avoid setting default values within destructuring due to the challenge of accommodating two different types for the same value. Instead, consider moving the default value assignment to the body of the constructor:

constructor({
    idKey, sortKey,
}: BaseStoreConfig<T, Tid, Tsk>) {
    this[_idKey] = idKey ?? "id" // works fine
    this[_sortKey] = sortKey
}

By making this adjustment, the code compiles without any errors.

Access Playground link here to view the code

Answer 2

It appears that Typescript is struggling to handle different types for the same value, such as idKey, depending on whether it is viewed from the caller's perspective (Tid or undefined) or from the implementer's side (Tid or "id"). This issue is similar to others like those reported in microsoft/TypeScript#42053. However, the timeline for resolving these bugs remains uncertain.

The constructor parameter is annotated as

BaseStoreConfig<T, Tid, Tsk>

, where the idKey property is of type Tid | undefined. When attempting to assign a default value of "id" to it, the compiler flags it as an error due to the mismatch between "id" and Tid. The change in TypeScript behavior post version 3.9 results in an error mentioning string rather than specifically "id". Reverting to version 3.9 reveals an explicit error referencing "id".

A possible solution might be to avoid setting default values within destructuring due to the challenge of accommodating two different types for the same value. Instead, consider moving the default value assignment to the body of the constructor:

constructor({
    idKey, sortKey,
}: BaseStoreConfig<T, Tid, Tsk>) {
    this[_idKey] = idKey ?? "id" // works fine
    this[_sortKey] = sortKey
}

By making this adjustment, the code compiles without any errors.

Access Playground link here to view the code

The TypeScript error ts2322 occurs when using a generic constraint that involves keyof T and a

Answer №1

Similar questions

Unshifting values in a JavaScript array only if they exist in another array

The error page is requesting a root-layout, which indicates that having multiple root layouts is not feasible

Updating the image source attribute using Vue.js with TypeScript

Determining the presence of generic K within generic M in Typescript Generics and Redux

What is the best way to execute multiple functions simultaneously in Angular?

Sending a parameter between files in a React application: a step-by-step guide

Comparing plain objects and class instances for modeling data objects

The parameter type (key: string, id: string, pagination: number) in the argument does not match the expected type of Boolean for the parameter

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

Similar to the "beforesend" functionality in JavaScript, there is a corresponding feature

Error: The FactoryMethod.render() function requires a valid React element to be returned, or null

Establish the predefined date for the air-datepicker

Error: This property is not available on either 'false' or 'HTMLAudioElement' types

Prevent Click Event on Angular Mat-Button

What is the issue when using TypeScript if my class contains private properties while the object I provide contains public properties?

Dealing with Errors in Node.js Using Typescript and Express

Exploring the differences in object shapes using TypeScript

I need a way to call a function in my Typescript code that will update the total value

What could be causing the HTTP response Array length in Angular to be undefined?

The error code TS2345 indicates that the argument type 'Event' cannot be assigned to a parameter type 'string'