The left-hand side of assignment expression may not be an optional property access

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

The left-hand side of assignment expression may not be an optional property access #

The error "The left-hand side of an assignment expression may not be an optional property access" occurs when we try to use optional chaining (?.) to assign a property to an object. To solve the error, use an if statement that serves as a type guard instead.

Here is an example of how the error occurs.

index.ts
type Employee = { name: string; country: string; }; let employee: Employee | undefined; // 👈️ could be undefined // ⛔️ Error: The left-hand side of an // assignment expression may not be // an optional property access.ts(2779) employee?.country = 'Germany';

We aren't allowed to use the optional chaining (?.) operator on the left-hand side of an assignment.

To solve the error, use an if statement as a type guard before the assignment.

index.ts
type Employee = { name: string; country: string; }; let employee: Employee | undefined; // 👈️ could be undefined if (employee != undefined) { employee.country = 'Germany'; }

We used the loose not equals operator (!=), to check if the variable is NOT equal to null and undefined.

The if block is only run if employee does not store an undefined or null value, which is similar to what the optional chaining (?.) operator does.

You might also see examples online that use the non-null assertion operator to solve the error.

index.ts
type Employee = { name: string; country: string; }; let employee: Employee | undefined; // 👈️ could be undefined employee!.country = 'Germany';

The exclamation mark is the non-null assertion operator. It removes null and undefined from the type.

This is very risky most of the time, as it often causes runtime errors when we aren't absolutely sure that the value is never going to be null or undefined.

In most cases, you should use a simple if statement that serves as a type guard like we did in the previous code sample.

The optional chaining (?.) operator short-circuits if the reference is equal to null or undefined.

index.ts
type Employee = { name: string; country: string; }; let employee: Employee | undefined; // 👈️ could be undefined // 👇️ undefined console.log(employee?.country.toLowerCase());

The optional chaining (?.) operator will simply return undefined in the example, because employee has a value of undefined.

However, the optional chaining operator cannot be used on the left-hand side of an assignment expression.

Conclusion #

The error "The left-hand side of an assignment expression may not be an optional property access" occurs when we try to use optional chaining (?.) to assign a property to an object. To solve the error, use an if statement that serves as a type guard instead.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.