1

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>
        )
    }
Rabner Casandara
  • 151
  • 3
  • 18

2 Answers2

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");
PIG208
  • 2,060
  • 2
  • 10
  • 25
  • It possible but not always return null. If there is a value in it then there will be no null value – Rabner Casandara Jul 13 '21 at 07:06
  • Yes, that's why it has the type `string | null`, which denotes the fact that it can be either of them. – PIG208 Jul 13 '21 at 07:07
  • TypeScript enforces you to guarantee that `JSON.parse` gets a `string`, so that everything that happens inside `JSON.parse` will work as expected. – PIG208 Jul 13 '21 at 07:08
  • 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 Jul 13 '21 at 07:09
  • 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 – Rabner Casandara Jul 13 '21 at 07:11
  • I see. The error occurs at this line in your code, `const auth:boolean = JSON.parse(localStorage.getItem('auth'));`. This error is raised by TypeScript complaining that `JSON.parse` requires a `string`. There is really nothing wrong with your if-else statement. – PIG208 Jul 13 '21 at 07:37
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>
    )
}
}
Running Rabbit
  • 2,634
  • 15
  • 48
  • 69
  • 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 ? – Rabner Casandara Jul 13 '21 at 07:15
  • 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 – Running Rabbit Jul 13 '21 at 07:19