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

Question

I am very beginner in typescript. I am trying to get my local storage variable auth value. I know variable in local storage are stored as a string. So I am converting it into Boolean using JSON.parse But I am getting error saying [Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'].

Getting error at line: 2 where I am declaring auth Variable

let leftmenu;
    const auth:boolean = JSON.parse(localStorage.getItem('auth'));
    if (auth === true) {
        leftmenu = (
            <React.Fragment>
                <Navbar.Text>
                    Signed in as: <a href="#login">Mark Otto</a>
                </Navbar.Text>
                <Button variant="outline-success">Logout</Button>
            </React.Fragment>);
    } else {
        leftmenu = (
            <React.Fragment>
                <Button variant="outline-success">Login</Button>
                <Button variant="outline-success">Sign Up</Button>
            </React.Fragment>
        )
    }

Does this answer your question? Use localStorage.getItem() with typescript — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Jul 13, 2021 at 7:08

PIG208 · Accepted Answer · 2021-07-13 07:04:16Z

2

Because it's possible that localStorage.getItem('auth') will return null, while JSON.parse requires a string.

You will need to do a null check before parsing the variable.

cosnt authRaw: string = localStorage.getItem('auth');
if(authRaw !== null){
    const auth: boolean = JSON.parse(authRaw);
}

A simpler approach is to use ?? to add a fallback value as an alternative to localStorage.getItem('auth')

const auth:boolean = JSON.parse(localStorage.getItem('auth') ?? "false");

answered Jul 13, 2021 at 7:04

PIG208

2,4602 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rabner Casandara Over a year ago

It possible but not always return null. If there is a value in it then there will be no null value

PIG208 Over a year ago

Yes, that's why it has the type string | null, which denotes the fact that it can be either of them.

PIG208 Over a year ago

TypeScript enforces you to guarantee that JSON.parse gets a string, so that everything that happens inside JSON.parse will work as expected.

Rabner Casandara Over a year ago

else condition is also defined if I get null from localstorage then the else part will run. So, why it is throwing an error? Please explain in simple way

Rabner Casandara Over a year ago

What I expect from my condition is if the auth variable is true then run if part. If anything available in auth rather than true then run else part

|

Running Rabbit · Accepted Answer · 2021-07-13 07:12:11Z

1

Try something like this:

const auth: string | null = JSON.parse(localStorage.getItem('auth'));
if (auth!== null) {
    if(auth=="true") {
    leftmenu = (
        <React.Fragment>
            <Navbar.Text>
                Signed in as: <a href="#login">Mark Otto</a>
            </Navbar.Text>
            <Button variant="outline-success">Logout</Button>
        </React.Fragment>);
} else {
    leftmenu = (
        <React.Fragment>
            <Button variant="outline-success">Login</Button>
            <Button variant="outline-success">Sign Up</Button>
        </React.Fragment>
    )
}
}

answered Jul 13, 2021 at 7:12

Running Rabbit

2,74015 gold badges55 silver badges74 bronze badges

2 Comments

Rabner Casandara Over a year ago

What I expect from my condition is if the auth variable is true then run if part. If anything else in auth rather than true then run else part. So, what's wrong in my condition ?

Running Rabbit Over a year ago

Your condition is okay, but you need to make sure that the localStorage item 'auth' must not be null. In your case it is getting value as null. that is why I added string | null because, let say, if the Parse get null, atleast you have a way to handle it

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related