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

Hapi and Bell's attempt at authenticating with Twitter was unsuccessful

Angular 2: Issue with data table not updating after item deletion

The declared type 'never[]' cannot be assigned to type 'never'. This issue is identified as TS2322 when attempting to pass the value of ContextProvider using the createContext Hook

Creating a currency input field in HTML using a pattern textbox

Develop an interface in TypeScript for intricate data structures

The function 'appendChild' is not recognized on the type 'unknown'.ts(2339)

TypeScript: Unable to fetch the property type from a different type

A guide to sending epoch time data to a backend API using the owl-date-module in Angular

Once the Angular project has been initialized, the Button disable attribute cannot be modified

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

Encountering a 403 error when attempting to upload files to Google Cloud Storage (GCS) using Signed URLs

A new interface property type that is customized based on the type property that is passed in

"Exploring the process of creating a custom type by incorporating changes to an existing interface

Filtering an array using criteria: A step-by-step guide

Issue with NullInjectorError: Failure to provide a custom component - Attempting to add to providers without success

What is the best way to organize a collection of objects by a specific characteristic in Typescript?

Error: Module '/node_modules/.vite/deps/react-pro-sidebar.js?v=913080ef' does not export 'ProSidebar' as requested

Adding an item into a list with TypeScript is as simple as inserting it in the correct

React waitforelement fails to work in conjunction with asynchronous calls

Sorting through a list of strings by checking for a specific character within each string