Tips for referencing functions in TypeScript code

Question

Tips for referencing functions in TypeScript code

In regard to the function getCards, how can a type be declared for the input of memoize? The input is a reference to a function.

import memoize from "fast-memoize";

function getCards<T>(
  filterBy: string,
  CardsList: T[] = CardsJSON.map((item, i) => ({ ...item, id: i }))
) {
  return CardsList;
}

// My attempted solution.
// const testType: Array<ICard> = getCards<ICard>("test");

const fn = memoize(getCards);

A type error related to CardsList is being encountered. It seems to be difficult to pinpoint the exact cause of the error..?

TS2322: Type '{ id: number; spId?: string | undefined; callToAction?: string | undefined; cardTags?: any[] | undefined; campaignId: string; cardTitle: string; cardDescription: string; endAgeLimit?: number | undefined; ... 37 more...; updatedAt: string; }[]' is not assignable to type 'T[]'. Type '{ id: number; spId?: string | undefined; callToAction?: string | undefined; cardTags?: any[] | undefined; campaignId: string; cardTitle: string; cardDescription: string; endAgeLimit?: number | undefined; ... 37 more ...; updatedAt: string; }' is not assignable to type 'T'.

typescript memoization typescript-generics

Answer 1

Answer №1

It seems that the main issue arises from the compiler's inability to guarantee compatibility of types when a function is called, as demonstrated in this example:

getCards<User>("name");

In this case, although T is explicitly set to User, the card list defaults to Card & { id: number }, resulting in an incompatible match.

I initially considered resolving this by adding a constraint like the one below on the type parameter, but unfortunately, it did not prove effective:

function getCards<T extends Card & { id: number }>

However, this approach falls short because the type is used as the argument of an array. Therefore, if you assign T to, for instance, SpecialCard with an additional property

bonus</code (not present in the <code>Card

type), and then retrieve an item from the default card list, the object returned will not be of type SpecialCard, since the property will be missing.

Ultimately, the constraint must be a subset rather than a superset of card properties, making a generic solution unsuitable in this scenario.

Answer 2

It seems that the main issue arises from the compiler's inability to guarantee compatibility of types when a function is called, as demonstrated in this example:

getCards<User>("name");

In this case, although T is explicitly set to User, the card list defaults to Card & { id: number }, resulting in an incompatible match.

I initially considered resolving this by adding a constraint like the one below on the type parameter, but unfortunately, it did not prove effective:

function getCards<T extends Card & { id: number }>

However, this approach falls short because the type is used as the argument of an array. Therefore, if you assign T to, for instance, SpecialCard with an additional property

bonus</code (not present in the <code>Card

type), and then retrieve an item from the default card list, the object returned will not be of type SpecialCard, since the property will be missing.

Ultimately, the constraint must be a subset rather than a superset of card properties, making a generic solution unsuitable in this scenario.

Tips for referencing functions in TypeScript code

Answer №1

Similar questions

The issue arises when Jest ceases to function properly once the "type": "module" is configured in the tsconfig.json file

Setting the type of a prop dynamically based on another prop value

Using TypeScript: creating functions without defining an interface

Errors related to reducer types in createSlice of Redux Toolkit

Typescript error: Cannot access property "status" on type "never".ts(2339)

Typescript struggling to load the hefty json file

React error: The DatePickerProps generic type must have one type argument specified

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

Struggling to determine data type in Typescript

Tips on narrowing down the type of callback event depending on the specific event name

Retrieving specific properties from a JSON object and logging them

Steps for implementing a conditional rendering in your codeHere is a

JavaScript library declaration files are essential for providing type definitions and enabling

Encountering an issue with managing promises in Observables for Angular HTTP Interceptor

Expanding TypographyProps and TextFieldProps for enhanced functionality

When attempting to trigger a function by clicking a button in Angular 8 using HTTP POST, nothing is happening as

Basic exam but located in a place that is not valid

`Mapping child routes in Angular using basic components`

React's Redux persist is causing a duplication of requests being sent

Manipulate and send back information from Observable in Angular