Borislav Hadzhiev
Sun Mar 06 2022·3 min read
Photo by Davide Cantelli
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.
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.
boolean
or an undefined
value.The isProgrammer
variable is typed as a boolean
, so it only expects to get
assigned a value that is a boolean
.
emp.isProgrammer
property might have a value of undefined
, which is not compatible with the type of the isProgrammer
variable, which only expects a boolean
.Here are a couple of examples of how you can solve the error.
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.
null
and undefined
from a type without doing any explicit type checking.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.
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.
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.
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.
isProgrammer
variable will always get assigned a boolean, even if emp.isProgrammer
is undefined
.You could also use the nullish coalescing operator (??) to solve the error.
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.
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.
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.