Type 'boolean or undefined' not assignable to type boolean

Type 'boolean or undefined' not assignable to type boolean #

The "Type 'boolean | undefined' is not assignable to type boolean" error occurs when a possibly undefined value is assigned to something that expects a boolean. To solve the error, use the non-null assertion operator or a type guard to verify the value is a boolean before the assignment.

Here is an example of how the error occurs.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean; // 👈️ optional
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

// ⛔️ Error: Type 'boolean | undefined' is
// not assignable to type 'boolean'.
const isProgrammer: boolean = emp.isProgrammer;

The isProgrammer property is marked as optional in the Employee interface.

The isProgrammer variable is typed as a boolean, so it only expects to get assigned a value that is a boolean.

Here are a couple of examples of how you can solve the error.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const isProgrammer: boolean = emp.isProgrammer!; // 👈️ non-null assertion

console.log(isProgrammer); // 👉️ true

The exclamation mark is the non-null assertion operator in TypeScript.

When you use this approach, you basically tell TypeScript that this value will never be null or undefined.

This approach is very similar to using a type assertion.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

const isProgrammer: boolean = emp.isProgrammer as boolean;

console.log(isProgrammer); // 👉️ true

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that emp.isProgrammer will be a boolean and not to worry about it.

You could set the type of the isProgrammer variable to be boolean | undefined, which could solve the error depending on your use case.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

// 👇️ types now match
const isProgrammer: boolean | undefined = emp.isProgrammer;

console.log(isProgrammer); // 👉️ true

The type of the isProgrammer variable now matches the type of the emp.isProgrammer property, so no error is shown.

An alternative approach is to use a type guard.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

const isProgrammer: boolean =
  emp.isProgrammer !== undefined ? emp.isProgrammer : false;

console.log(isProgrammer); // 👉️ true

We used a ternary operator to check if the isProgrammer property is not equal to undefined.

If the property is not equal to undefined, its value gets assigned to the isProgrammer variable, otherwise we use false as a fallback.

You could also use the nullish coalescing operator (??) to solve the error.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

const isProgrammer: boolean = emp.isProgrammer ?? false;

console.log(isProgrammer); // 👉️ true

The nullish coalescing operator (??) enables us to specify a fallback for when a value is null or undefined.

So, if emp.isProgrammer is null or undefined, we set the isProgrammer variable to false.

You can also use the logical OR (||) operator in a similar way.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

const isProgrammer: boolean = emp.isProgrammer || false;

console.log(isProgrammer); // 👉️ true

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

This is different than the nullish coalescing operator (??), because nullish coalescing only checks for null and undefined.

The logical OR (||) operator would return the value to the right if the value to the left is any of the following: null, undefined, false, 0, "" (empty string), NaN (not a number).

Even a simple if statement that serves as a type guard can be used to solve the error.

Copied!
interface Employee {
  id: number;
  name: string;
  isProgrammer?: boolean;
}

const emp: Employee = {
  id: 1,
  name: 'James',
  isProgrammer: true,
};

let isProgrammer = false;

if (emp.isProgrammer !== undefined) {
  isProgrammer = emp.isProgrammer;
}

console.log(isProgrammer); // 👉️ true

We used the let keyword to initialize the isProgrammer variable to false.

In the if statement, we check if the emp.isProgrammer property is not equal to undefined and assign the isProgrammer variable to the corresponding value.