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

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.

Copied!
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.

Copied!
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.

Copied!
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.

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.

Copied!
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.