Argument type 'string or null' not assignable to parameter of type string

avatar

Borislav Hadzhiev

Wed Mar 23 20223 min read

Argument type 'string or null' not assignable to parameter of type string #

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.

argument type null not assignable parameter string

Here is an example of how the error occurs.

index.ts
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.

TypeScript is basically telling us that the value we are passing to the function might be 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.

index.ts
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.

It removes 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.

index.ts
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.

index.ts
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.

This way we can be sure that the 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.

index.ts
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.

index.ts
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.

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).

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.

index.ts
// 👇️ 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.