The code is anticipating a declaration or statement in JavaScript/TypeScript

Question

The code is anticipating a declaration or statement in JavaScript/TypeScript

Currently, I am working with Typescript 1.7 and React 0.14 using the new ES6 syntax. Specifically, I am encountering an issue with destructuring assignment, which is explained in detail here.

let x0, x1, y0, y1;
if(this.props.viewport) {
    {x0, x1, y0, y1} = this.props.viewport;
}

Despite following the syntax correctly, I keep receiving a

Declaration or statement expected

error. Can someone please point out what mistake I might be making?

Appreciated!

javascript typescript

Answer 1

Answer №1

After some troubleshooting, I discovered the issue. It turned out that enclosing the entire line in parentheses solved the problem. The corrected code looks like this:

let x0, x1, y0, y1;
if(this.props.viewport) {
    ({x0, x1, y0, y1} = this.props.viewport);
}

Answer 2

After some troubleshooting, I discovered the issue. It turned out that enclosing the entire line in parentheses solved the problem. The corrected code looks like this:

let x0, x1, y0, y1;
if(this.props.viewport) {
    ({x0, x1, y0, y1} = this.props.viewport);
}

Answer 3

Answer №2

My issue arose when I attempted to assign the variable name case. For instance, var case = .... After some investigation, it became clear that this error occurred because case is a reserved keyword in JavaScript for the Switch Statement.

Answer 4

My issue arose when I attempted to assign the variable name case. For instance, var case = .... After some investigation, it became clear that this error occurred because case is a reserved keyword in JavaScript for the Switch Statement.

Answer 5

Answer №3

If you want to create variables and assign them values in the same line, you can do so like this:

let person = {name: "Alex", age: 23, favoriteColor: "orange"}

let {name, age} = person

document.write(name + " is " + age + " years old")

If you first declare the variables and then assign the values on another line, the approach is slightly different, requiring parentheses for correct parsing. Like this:

let person = {name: "Alex", age: 23, favoriteColor: "orange"}

let name, age;

({name, age} = person)

document.write(name + " is " + age + " years old")

If you need to assign values to a property from an object or a getter inside a class, it can be a bit trickier, appearing like this:

({name: this.name, age: this.age} = this.person)

Answer 6

If you want to create variables and assign them values in the same line, you can do so like this:

let person = {name: "Alex", age: 23, favoriteColor: "orange"}

let {name, age} = person

document.write(name + " is " + age + " years old")

If you first declare the variables and then assign the values on another line, the approach is slightly different, requiring parentheses for correct parsing. Like this:

let person = {name: "Alex", age: 23, favoriteColor: "orange"}

let name, age;

({name, age} = person)

document.write(name + " is " + age + " years old")

If you need to assign values to a property from an object or a getter inside a class, it can be a bit trickier, appearing like this:

({name: this.name, age: this.age} = this.person)

The code is anticipating a declaration or statement in JavaScript/TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Issue: ReactJS - $npm_package_version variable not functioning properly in build versionIn the current

Error: Got a SyntaxError with CrafterCMS while attempting to use TypeScript - Unexpected token 'export'

Error: Type error - unable to call function on string during Ajax request

Establishing the primary sorted column in a Datatable

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Using jQuery to load content with a dynamic variable instead of specific element IDs

Select2 in Bootstrap does not trigger the select event when pasting until a word has been typed

Matching utility types and themes in Tailwind CSS

Optimal methods for sending Redux state to components

JavaScript code for styling changes is not functioning as expected

Jstree's select_node function is failing to trigger

Filter a Two-Dimensional Array Based on Elements from a Different Array

Is there a way to create intricate animations using JavaScript?

The submit button remains disabled despite completing all required fields

Exporting variables in Angular's Ahead of Time (AoT) compiler is

Acquire the Dynamic HTML Tag from the source code of the page

Retrieve the desired destination URL in the CanActivate guard when lazily loading modules in Angular

How can Django implement a textarea widget with a character counter/limiter using JavaScript?

Issue with "Access-Control-Allow-Origin" header missing in express and react application

Utilizing the .data() method for establishing a variable