One localStorage.setItem invocation is getting a typescript error, but the previous near-identical l-CodePudding

In the following block of code:

const setSession = (access?: string | null, refresh?: string | null) => {
    if (access) {
        window.localStorage.setItem('accessToken', access);
        window.localStorage.setItem('refreshToken', refresh);
        axios.defaults.headers.common.Authorization = `Bearer ${access}`;
    } else {
        localStorage.removeItem('accessToken');
        localStorage.removeItem('refreshToken');
        delete axios.defaults.headers.common.Authorization;
    }
};

The setItem line regarding accessToken has no typescript errors, whether or not the line regarding refreshToken exists.

However, I'm getting a typescript error on the setItem invocation for refreshToken. The error is:

Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.  TS2345

    41 |     if (access) {
    42 |         window.localStorage.setItem('accessToken', access);
  > 43 |         window.localStorage.setItem('refreshToken', refresh);
       |                                                     ^
    44 |         axios.defaults.headers.common.Authorization = `Bearer ${access}`;
    45 |     } else {
    46 |         localStorage.removeItem('accessToken');

Why am I getting the error on the second line? I also get the error if I change the function definition to:

const setSession = (access?: string | null, refresh: string | null = null) => {

Then the error becomes:

Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.  TS2345

    41 |     if (access) {
    42 |         window.localStorage.setItem('accessToken', access);
  > 43 |         window.localStorage.setItem('refreshToken', refresh);
       |                                                     ^
    44 |         axios.defaults.headers.common.Authorization = `Bearer ${access}`;
    45 |     } else {
    46 |         localStorage.removeItem('accessToken');

What's happening here? Are the two invocations of localStorage.setItem not identical in terms of types?

CodePudding user response：

Looks like setItem is expecting to get a string, and while access is confirmed to be "truthy", refresh could still be "falsy", and is therefore throwing an error.

This should fix it:

const setSession = (access?: string | null, refresh?: string | null) => {
    if (access) {
        window.localStorage.setItem('accessToken', access);
        if (refresh)
            window.localStorage.setItem('refreshToken', refresh);
        axios.defaults.headers.common.Authorization = `Bearer ${access}`;
    } else {
        localStorage.removeItem('accessToken');
        localStorage.removeItem('refreshToken');
        delete axios.defaults.headers.common.Authorization;
    }
};