Consider the following TS example:

fetch("http://localhost:3000/auth", {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
    body: JSON.stringify(data)
  })
  .then((response) => {
    // would like to store some information from the response's headers
    // like access tokens etc.

    // Typescript plains about this iteration (see more info below)
    for (var pair of response.headers.entries()) {
      console.log(pair[0] + ': ' + pair[1])
    }

    return response.json()
  })
  // get the response data etc...
  .then((data) => {
    console.log(data);
  })
  // log an error etc...
  .catch((error) => {
    console.log('ERROR: ', error);
  })

Normally, this would be valid but Typescript plains about the iteration and suggests a piler option:

Type 'IterableIterator<[string, string]>' is not an array type or a string type.
Use piler option '--downlevelIteration' to allow iterating of iterators.

Are there any downsides to using --downlevelIteration? Is there another way of acplishing this without having to change the piler options?

Thanks!

Consider the following TS example:

fetch("http://localhost:3000/auth", {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
    body: JSON.stringify(data)
  })
  .then((response) => {
    // would like to store some information from the response's headers
    // like access tokens etc.

    // Typescript plains about this iteration (see more info below)
    for (var pair of response.headers.entries()) {
      console.log(pair[0] + ': ' + pair[1])
    }

    return response.json()
  })
  // get the response data etc...
  .then((data) => {
    console.log(data);
  })
  // log an error etc...
  .catch((error) => {
    console.log('ERROR: ', error);
  })

Normally, this would be valid but Typescript plains about the iteration and suggests a piler option:

Type 'IterableIterator<[string, string]>' is not an array type or a string type.
Use piler option '--downlevelIteration' to allow iterating of iterators.

Are there any downsides to using --downlevelIteration? Is there another way of acplishing this without having to change the piler options?

Thanks!

• javascript
• typescript
• iterator

• 1 Looks like downlevelIteration is only for ES3/ES5 targets and you better change your target to ES6+ instead. But yes, changing your piler options is the appropriate solution. – Bergi Commented Nov 23, 2019 at 20:23

3 Answers 3

Iterators (in some languages called Enumerators) were added in ES6. They are not present in ES5 and older. Before ES6 only iterable construct was Array or so-called array like native objects. ES6 brought iterators and features like for ... of that works with them. When targeting below ES6 you have to use downlevelIteration in order to transpile ES6 iterator code to ES5 patible code (iterator will be changed do Arrays and for ... of will be replaced by ES5 valid syntax). If you are using no other transpiler beside TSC you have no other choice but enable this flag.

const getHeaders = (headers: Headers) => {
  let headerObj: IObject = {};
  const keys = headers.keys();
    let header = keys.next();
    while (header.value) {
      headerObj[header.value] = headers.get(header.value);
      header = keys.next();
    }
  return headerObj;
};

The Headers.entries() method returns an iterator allowing to go through all key/value pairs contained in this object. Both the key and value of each pair are String objects. -MDN

const request = new Request("https://api.w3/groups");

(async () => {
   let response = await fetch(request);
   for (const entry of response.headers.entries()) {
     console.log(entry[0] + ':' + entry[1]);
   }
   if(response.ok){
      //...
   } else {
      
   }
})().catch(err => {
    console.error(err);
});