Borislav Hadzhiev
Wed Mar 23 2022·3 min read
Photo by Bruno van der Kraan
The error "Argument of type 'string | null' is not assignable to parameter of
type string" occurs when a possibly null
value is passed to a function that
expects a string
. To solve the error, use a type guard to verify the value is
a string
before passing it to the function.
Here is an example of how the error occurs.
function getMessage(message: string) { return message; } const value = Math.random() > 0.5 ? 'hello' : null; // ⛔️ Error: Argument of type 'string | null' is not // assignable to parameter of type 'string'. // Type 'null' is not assignable to type 'string'.ts(2345) getMessage(value);
The function expects to be called with an argument of type string
, but the
passed in argument is possibly null
.
null
, which is not compatible with the type of the function's parameter, which only expects a string
.One way to get around this is to use a non-null assertion.
function getMessage(message: string) { return message; } const value = Math.random() > 0.5 ? 'hello' : null; getMessage(value!); // 👈️ non-null assertion
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 is very similar to a type assertion and should only be used when you're absolutely sure that the value is of the expected type.
function getMessage(message: string) { return message; } const value = Math.random() > 0.5 ? 'hello' : null; getMessage(value as string); // 👈️ type assertion
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 the variable stores a string and not to worry about it.
An alternative, and much better approach is to use a type guard.
function getMessage(message: string) { return message; } const maybeString = Math.random() > 0.5 ? 'hello' : null; const message: string = maybeString !== null ? maybeString : ''; getMessage(message);
We used a
ternary operator
to check if the maybeString
variable is not equal to null
.
If it's not equal to null
, it gets assigned to the message
variable,
otherwise we use an empty string as a fallback.
message
variable will always get assigned a string, even if the maybeString
variable is null
.You could also use the nullish coalescing operator (??) to solve the error.
function getMessage(message: string) { return message; } const maybeString = Math.random() > 0.5 ? 'hello' : null; getMessage(maybeString ?? '');
The nullish coalescing operator (??) enables us to specify a fallback for when a
value is null
or undefined
.
So, if the maybeString
variable is null
or undefined
, we pass an empty
string argument to the function.
You can also use the logical OR (||) operator in a similar way.
function getMessage(message: string) { return message; } const maybeString = Math.random() > 0.5 ? 'hello' : null; getMessage(maybeString || '');
The logical OR (||) operator returns the value to the right if the value to the left is falsy.
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).
The cause of the "Argument of type 'string | null' is not assignable to parameter of type string" error is that the type of the function's parameter and the type of the passed in argument are not compatible.
So, depending on your use case, you could also solve the error by updating the type of the function's parameter and making the parameter and the passed in argument compatible types.
// 👇️ parameter is type string or null function getMessage(message: string | null) { return message; } // 👇️ argument is also type string or null const maybeString = Math.random() > 0.5 ? 'hello' : null; getMessage(maybeString);
The function's parameter is now typed as string
or null
, so we are able to
pass it an argument of type string
or null
because the two types are
compatible.