Losing the generic type in nested interfaces

Question

Losing the generic type in nested interfaces

Having issues with generics and 'nested' interfaces when working with ReadonlyArray. Is there a way to utilize the filterList function without losing the type for the list parameter?

interface INumber {
    value: number
}

interface IState {
    readonly numbers: ReadonlyArray<INumber>
}

var state: IState = {
    numbers: [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
} 

function filterList<T>(list: T) {
    return list.filter(x => x.value > 2);
}

// Error: Property 'filter' does not exist on type 'T'.
const res = filterList(state.numbers);

If we attempt to modify the filterList function as shown below, it will fail due to the use of ReadonlyArray.

function filterList(list: INumber[]) {...}

// Error: Argument of type 'ReadonlyArray<INumber>' is not assignable
// to parameter of type 'INumber[]'. Property 'pop' is missing in 
// type 'ReadonlyArray<INumber>'.
const res = filterList(state.numbers);

How should this situation be best handled? Appreciate any insights!

typescript

Answer 1

Answer №1

There are various options available to you. ReadonlyArray<T> is a subset of Array, allowing us to constrain T to a ReadonlyArray containing values:

var state: IState = {
  numbers: [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
} 

function filterList<T extends ReadonlyArray<{value : number }>>(list: T){
  return list.filter(x => x.value > 2);
}

const res = filterList(state.numbers); // successful

var arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
const res2 = filterList(arr); //successful

Although specifying the type parameter as the list doesn't offer much advantage, as filter will always return a regular array regardless of whether it's a ReadonlyArray or Array. Hence, this alternative approach will also function correctly:

function filterList<T extends {value : number }>(list: ReadonlyArray<T>){
  return list.filter(x => x.value > 2);
}
const res = filterList(state.numbers); // successful

var arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
const res2 = filterList(arr); //successful

If you wish for filterList to retain the information on whether a read-only array or a regular array was passed, you can opt for the initial version and return T. However, in order to ensure that the result of filter is typed as a ReadonlyArray, a type assertion may be necessary:

function filterList<T extends ReadonlyArray<{value : number }>>(list: T): T{
  return list.filter(x => x.value > 2) as any;
}

const res = filterList(state.numbers); // successful, res is ReadonlyArray<INumber>

var arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
const res2 = filterList(arr); //successful, res is { value: number; }[]

Answer 2

There are various options available to you. ReadonlyArray<T> is a subset of Array, allowing us to constrain T to a ReadonlyArray containing values:

var state: IState = {
  numbers: [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
} 

function filterList<T extends ReadonlyArray<{value : number }>>(list: T){
  return list.filter(x => x.value > 2);
}

const res = filterList(state.numbers); // successful

var arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
const res2 = filterList(arr); //successful

Although specifying the type parameter as the list doesn't offer much advantage, as filter will always return a regular array regardless of whether it's a ReadonlyArray or Array. Hence, this alternative approach will also function correctly:

function filterList<T extends {value : number }>(list: ReadonlyArray<T>){
  return list.filter(x => x.value > 2);
}
const res = filterList(state.numbers); // successful

var arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
const res2 = filterList(arr); //successful

If you wish for filterList to retain the information on whether a read-only array or a regular array was passed, you can opt for the initial version and return T. However, in order to ensure that the result of filter is typed as a ReadonlyArray, a type assertion may be necessary:

function filterList<T extends ReadonlyArray<{value : number }>>(list: T): T{
  return list.filter(x => x.value > 2) as any;
}

const res = filterList(state.numbers); // successful, res is ReadonlyArray<INumber>

var arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
const res2 = filterList(arr); //successful, res is { value: number; }[]

Losing the generic type in nested interfaces

Answer №1

Similar questions

Tips on Identifying the Category

Issue with InversifyJS @multiInject: receiving an error stating "ServiceIdentifier has an ambiguous match"

Ways to generate an Angular 7 component

"When attempting to render a Node inside the render() method in React, the error message 'Objects are not valid as a React child' is

Should I opt for the spread operator [...] or Array.from in Typescript?

Error message: Property is not found in the $rootScope object in AngularJS

unable to transform this string into an object

Typescript: Creating a new type by filtering an interface for matching properties

You are unable to compile a module in Visual Studio Code unless you provide the --module flag

What is the best way to assign a TypeScript type as the object type within an array of objects sourced from a different interface?

What is the method for choosing an element by class name in TypeScript?

What is the best way to implement multiple ternary operators within HTML code?

Utilizing React TypeScript: Leveraging useRef for Linking purposes

Ensure that the interface limits the key value to match precisely the value of a constant in Typescript

React component stuck in endless loop due to Intersection Observer

"Efficiently Distributing HTTP Requests Among Simultaneous Observers using RxJS

Embedding Dropzone in Angular 2 or Typescript is already implemented

How come TypeScript remains silent when it comes to interface violations caused by Object.create?

If placed in the same document, will promises be executed sequentially?

The sanitizer variable becomes null when accessed outside of the NgOnInit function in Angular using TypeScript