Iterating with TypeScript

Question

How do you iterate N times when during each iteration you only want to use the key (index) of the iteration? There’s no array to iterate through - you could create an array like [...Array(num)] and call map() or forEach() on it, but then how can you use the key in each iteration without using the item (which in this case would be undefined) and without the TypeScript compiler moaning about it:

item is declared but its value is never read

Is this a use case for the old for loop or can it be done in a simpler/safer way?

{[...Array(totalNum)].map((item: any, key: number) => {
    // if I console.log(item), tsc won't moan, but clearly not a solution
    return (
        <SomeComponent key={key}>
        </SomeComponent>
    )
})}

What are you looking for in a "simpler/safer way"? Right now, it reads very opinonated and may be closed due to that. — k0pernikus, Mar 01 '21 at 17:52

score 4 · Accepted Answer · answered Mar 01 '21 at 17:48

4

Adding a _ in front of the parameter to indicate that the non-use of the parameter is deliberate can solve the warning:

[...Array(totalNum)].map((_item, key) => {

(note that explicitly declaring the types of the parameters is not required; it just adds extra syntax noise here)

If you want to remove the unused parameter completely, you can iterate over the keys of the array with Object.keys:

Object.keys([...Array(totalNum)]).map((key) => {

answered Mar 01 '21 at 17:48

CertainPerformance

356,069
52
309
320

1

It's worth noting that it's not typescript but tslint that is complaining about unused variable. Prefixing variable with `_` will only work if the rule is configured like `"no-unused-variable": [true, {"ignore-pattern": "^_"}]` – Max Mar 01 '21 at 17:55
1

It's not just a TSLint error, it's a TS error too. Eg https://stackoverflow.com/questions/44565671/ignore-ts6133-import-is-declared-but-never-used – CertainPerformance Mar 01 '21 at 17:57

score 1 · Answer 2 · answered Mar 01 '21 at 17:49

I've had to do this a lot in my codebase, and I made a handy helper called mapTimes()

/** Returns an array of the return value of `fn` run `times` number of times. */
export function mapTimes<T>(times: number, fn: (index: number) => T): T[] {
  const arr: T[] = []

  for (let i = 0; i < times; i++) {
    arr.push(fn(i))
  }

  return arr
}

I basically just build an array with value of the same integer as its index. Then you pass a function to map over it.

Usage:

{mapTimes(totalNum, (key: number) => {
    return (
        <SomeComponent key={key}>
        </SomeComponent>
    )
})}

Iterating with TypeScript

2 Answers2