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

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.

Here is an example of how the error occurs.

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

One way to get around this is to use a non-null assertion.

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

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.

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

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

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

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

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

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.

Copied!
// 👇️ 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.