Error in TypeScript occurs when trying to destructure a block-scoped variable before it has been declared

Question

Error in TypeScript occurs when trying to destructure a block-scoped variable before it has been declared

Hello everyone, I have the below code written in TypeScript

  const {
      data: { pageCollection }
    } = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS })


    ( [...(pageCollection?.items ?? [])].forEach((page) => {
      console.log('PAGEEE', page)
    }))

When I try to use the second line it shows an error message saying

Block scoped variable pageCollection can not be used before its declaration

However, if I remove the brackets from the second line like this:

  [...(pageCollection?.items ?? [])].forEach((page) => {
      console.log('PAGEEE', page)
    })

I then receive a different error message saying Cannot find name 'forEach'.

Does anyone have any idea what could potentially be causing this issue?

javascript typescript eslint

Answer 1

Answer №1

The issue at hand is a crucial missing ; that cannot be overlooked. Without it, JavaScript (as well as TypeScript) interprets the second statement as an extension of the first:

const {
    data: { pageCollection },
} = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS }); // <===
[...(pageCollection?.items ?? [])].forEach((page) => {
    console.log("PAGEEE", page);
});

If you plan to rely on automatic semicolon insertion when coding, ensure you are familiar with the rules regarding when you absolutely require a explicit semicolon. Typically, if a line starts with a ( or [, you must have the ; at the end of the preceding line (although technically it can vary based on the content of the previous line, it's safer to always include it).

Sidenote: The spread operator within the forEach loop isn't necessary; simply do this instead:

(pageCollection?.items ?? []).forEach((page) => {
    console.log("PAGEEE", page);
});

Personally, I prefer using for-of instead, but this choice may come down to personal style preferences:

for (const page of pageCollection?.items ?? []) {
    console.log("PAGEEE", page);
}

Answer 2

The issue at hand is a crucial missing ; that cannot be overlooked. Without it, JavaScript (as well as TypeScript) interprets the second statement as an extension of the first:

const {
    data: { pageCollection },
} = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS }); // <===
[...(pageCollection?.items ?? [])].forEach((page) => {
    console.log("PAGEEE", page);
});

If you plan to rely on automatic semicolon insertion when coding, ensure you are familiar with the rules regarding when you absolutely require a explicit semicolon. Typically, if a line starts with a ( or [, you must have the ; at the end of the preceding line (although technically it can vary based on the content of the previous line, it's safer to always include it).

Sidenote: The spread operator within the forEach loop isn't necessary; simply do this instead:

(pageCollection?.items ?? []).forEach((page) => {
    console.log("PAGEEE", page);
});

Personally, I prefer using for-of instead, but this choice may come down to personal style preferences:

for (const page of pageCollection?.items ?? []) {
    console.log("PAGEEE", page);
}

Answer 3

Answer №2

const {
      result
    } = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS })


const pageItems = result?.pageCollection?.items ?? []

pageItems.forEach((selectedPage) => {
      console.log('PAGE DETAIL', selectedPage)
})

You can try this updated version of the code, it should be functional.

Answer 4

const {
      result
    } = await apolloClient.query<PageSlugsQuery>({ query: GET_PAGE_SLUGS })


const pageItems = result?.pageCollection?.items ?? []

pageItems.forEach((selectedPage) => {
      console.log('PAGE DETAIL', selectedPage)
})

You can try this updated version of the code, it should be functional.

Error in TypeScript occurs when trying to destructure a block-scoped variable before it has been declared

Answer №1

Answer №2

Similar questions

error : failed to establish a connection to the MongoDB database

Converting a CSV string into an array only when there is a line break in the body

javascript href clears Internet Explorer webpage

Ways to access customer subscriptions in Stripe

Issue with detecting undefined in a nested function using Typescript

iterate over the array and retrieve all corresponding values using mongodb

Is Passport.js' serializeUser and deserializeUser functions never triggering?

obtain every potential substring in sequence

Understanding the reverse order of numbers displayed with while loop and innerHTML

Having trouble uploading APK to Google Play Developer using Publisher API

Typedoc: only export contents from a particular file are documented

Converting a typename to a type in TypeScript

Unable to convert imported JSON file into an array

Steps for connecting a front-end button to a Node.js event

Include an additional section in the stunning Radar Chart

What is the best way to merge two similar arrays of objects into one array object?

Switch to light mode upon clicking the toggle?

I am unable to correctly fetch the data string using Jquery Ajax from the server

Tips for choosing a particular value in an HTML <script> query

Assign a default value to empty elements in an array