Is it not possible to cast the incorrect type of the Typescript array.from(iterator)?

Question

Is it not possible to cast the incorrect type of the Typescript array.from(iterator)?

Encountering an error when converting flow code to typescript involving iterators. There seems to be a missing element in the iterator.

const iter: Iterator<RouteData> = contentMap.routes();
const contentArray: Array<RouteData> = Array.from(iter);

The error message specifies an issue with the second line, indicating that iter is of the correct type or that the return of contentMap.routes() is indeed an iterator:

Error:(109, 55) TS2769: No overload matches this call.
  Overload 1 of 4, '(iterable: Iterable<RouteData> | ArrayLike<RouteData>): RouteData[]', gave the following error.
    Argument of type 'Iterator<RouteData, any, undefined>' is not assignable to parameter of type 'Iterable<RouteData> | ArrayLike<RouteData>'.
      Property 'length' is missing in type 'Iterator<RouteData, any, undefined>' but required in type 'ArrayLike<RouteData>'.
  Overload 2 of 4, '(arrayLike: ArrayLike<RouteData>): RouteData[]', gave the following error.
    Argument of type 'Iterator<RouteData, any, undefined>' is not assignable to parameter of type 'ArrayLike<RouteData>'.

Why does this error occur and how can it be resolved?

The iterator is generated as follows:

routes(): Iterator<RouteData> {
    return this._routes.values();
}

The compile target for typescript is set to "es6", implying full support for maps. Is it simply impossible to create an array from an iterator, questioning previous practices (and whether babel was more forgiving)?

arrays typescript iterator

Answer 1

Answer №1

As you may be aware, an iterator is an entity equipped with a next function designed for traversing through an iterable (an entity featuring a [Symbol.iterator] function to retrieve an iterator).

Array.from takes in an iterable (or an array-like object), but in this scenario, it mistakenly perceives it as simply receiving an iterator.

The majority of iterators, including those provided by standard JavaScript methods, are iterable too because they incorporate the method

[Symbol.iterator]() { return this; }

, either directly or indirectly through the iterator prototype - although not all of them do. Hence, one cannot assume that all iterators are iterable.

It would be advisable to modify routes to specify that it yields something that acts as both an iterator and iterable:

routes(): Iterator<T> & Iterable<T> {
    return this._routes.values();
}

Subsequently:

const iter = contentMap.routes();
const contentArray = Array.from(iter);

(No necessity for explicitly stating types there, TypeScript will deduce them.)

Here's a demonstration on the playground illustrating the issue using Iterator.

Here's the same code using

Iterator<T> & Iterable<T>

like mentioned earlier.

Answer 2

As you may be aware, an iterator is an entity equipped with a next function designed for traversing through an iterable (an entity featuring a [Symbol.iterator] function to retrieve an iterator).

Array.from takes in an iterable (or an array-like object), but in this scenario, it mistakenly perceives it as simply receiving an iterator.

The majority of iterators, including those provided by standard JavaScript methods, are iterable too because they incorporate the method

[Symbol.iterator]() { return this; }

, either directly or indirectly through the iterator prototype - although not all of them do. Hence, one cannot assume that all iterators are iterable.

It would be advisable to modify routes to specify that it yields something that acts as both an iterator and iterable:

routes(): Iterator<T> & Iterable<T> {
    return this._routes.values();
}

Subsequently:

const iter = contentMap.routes();
const contentArray = Array.from(iter);

(No necessity for explicitly stating types there, TypeScript will deduce them.)

Here's a demonstration on the playground illustrating the issue using Iterator.

Here's the same code using

Iterator<T> & Iterable<T>

like mentioned earlier.

Is it not possible to cast the incorrect type of the Typescript array.from(iterator)?

Answer №1

Similar questions

What is the process for transforming the values brought in by ImportJSON into numeric values?

How can I use TypeScript to copy data from the clipboard with a button click?

Managing HTTP requests with errors within a forEach loop in Angular 9

Access the Angular application directly from the email

Troubleshooting Typescript compilation issues following an upgrade to a React Native project

Do we need to import Vue in every component when using Nuxt with TypeScript?

Guide to determine the presence of an element in a nested array in PHP

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!

Achieving Table Alignment in Java

Looking for a single array within a multi-dimensional array

Using ngModel instead of value to bind a custom Angular directive for currency input

How come the hook keeps triggering endlessly in a loop when I try to pass the updated props?

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Define the data type for the toObject function's return value

Creating TypeScript domain objects from JSON data received from a server within an Angular app

Tips for continuously running a loop function until retrieving a value from an API within a cypress project

Determine if an array of objects within React JS contains additional objects

Transforming the data within a character array into corresponding ASCII codes

Step-by-step guide to initializing a project using React with Typescript and a functional server-side script

Angular is unable to modify a property that is marked as read-only