Type 'IterableIterator<number>' is not an array type or a string type

Question

I am getting the following error when trying to generate a dynamic range of numbers.

Type 'IterableIterator<number>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.

I found an existing question but the solution isn't working for me.

TypeScript and Iterator: Type 'IterableIterator<T>' is not an array type

My setup is a follows...

• I used the command npx create-next-app@latest --ts

class FlexGrid extends React.Component {

    range(size: number, startAt = 0) {
        return [...Array(size).keys()].map(i => i + startAt);
    }

I have tried setting target: es6 and downlevelIteration: true neither resolve the error.

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "downlevelIteration": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Answer 1

Apparently it is being strict and doesn't want to create an array using spread from an iterator (which is not an array). However it's possible to create an array from an iterator using the Array.from function:

range(size: number, startAt = 0) {
  return Array.from(Array(size).keys()).map((i) => i + startAt);
}

Array.from accepts Iterable.