Typescript Error Type 'null' is not assignable to type

Question

In my project I am using Angular LocalStorage to store value of the record which is of Type Filename. I am getting below error in back method

Error

Type 'string | null' is not assignable to type 'FileName | undefined'.
  Type 'null' is not assignable to type 'FileName | undefined'.

I need help to solve this error, below is my code

Code


export interface FileName {
    fname: number;
    sname: number;
    Tange: number;
    quick: string;
    Mark: string;
    mine: number;
}

currentName: FileName | undefined = undefined;
previousName: FileName | undefined = undefined;

data(rec: FileName, Mark: HTMLTableDataCellElement) {
  const { fname, sname, Tange, record_id, mine } = rec;
  const quick = Mark.innerText;
  this.name.replaceAndNew({sname, Tange, record_id, quick, mine, fname}).subscribe(data => {
    this.process(data);
  })
   localStorage.setItem('FileName', JSON.stringify(rec));
}

back(){
  localStorage.getItem('FileName');
  this.currentName =  localStorage.getItem('FileName'); -----------------> Error

}

it's simple, your property this.currentName is a type of interface called FileName, but you are retreiving localStorage.getItem('FileName'); which will return a type DOMString , to solve your problem, you have to parse your code to an object like this JSON.parse(localStorage.getItem('FileName') then to change currentName: Filename to currentName: any — sohaieb azaiez
– sohaieb azaiez, Commented Mar 19, 2021 at 18:16
Don't change the type to any, that's bad advice. Use type casting instead. That way only the localStorage fetch could potentially break and the rest of your entire program that accesses currentName will still be type safe. — user24950814234
– user24950814234, Commented Mar 19, 2021 at 18:24

user24950814234 · Accepted Answer · 2021-03-19 18:36:10Z

8

fortunee is correct, however since everything in localStorage is stored as strings, Typescript has no way of guaranteeing that the object is still the same object. In this case, you need to tell Typescript what type the parsed object will be with a cast.

this.currentName =  JSON.parse(localStorage.getItem('FileName') || '{}') as FileName;

Afterwards you may want to duck type to make sure that this.currentName isn't an empty object (this could've happened if the user cleared their localStorage).

Example:

if (this.currentName.fname == null) {
  // Give the user an error message or something...
  this.currentName = undefined;
}

edited Mar 19, 2021 at 18:36

answered Mar 19, 2021 at 18:19

user24950814234

2,0371 gold badge17 silver badges21 bronze badges

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

7 Comments

fortunee Over a year ago

Why shouldn't TS be able to infer the type based on the value? Do you really have to cast?

user24950814234 Over a year ago

Because Typescript is a compile-time language, not a runtime language. You're actually running Javascript, not Typescript, and only Javascript can deal with local storage.

Tejas Mehta Over a year ago

After adding JSON.parse(localStorage.getItem('FileName')) as FileName ; I am getting

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

user24950814234 Over a year ago

I edited. That will fix your type error, but you should really do some duck type validation in your code afterwards for safety.

fortunee Over a year ago

Cool! Good answer!

|

Tanuwo · Accepted Answer · 2021-07-01 04:01:56Z

2

in case there's an error when parsing an object you can use try-catch to set the default value for it

try {
  this.currentName =  JSON.parse(localStorage.getItem('FileName')) as FileName;
} catch(e){
  this.currentName = {}
}

edited Jul 1, 2021 at 4:01

answered Jul 1, 2021 at 1:15

Tanuwo

1293 bronze badges

Comments

fortunee · Accepted Answer · 2021-03-19 18:16:03Z

0

You need to parse it back to an object with JSON.parse

this.currentName =  JSON.parse(localStorage.getItem('FileName'));

answered Mar 19, 2021 at 18:16

fortunee

4,3622 gold badges23 silver badges29 bronze badges

1 Comment

Tejas Mehta Over a year ago

I am getting

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

error

Yunnosch · Accepted Answer · 2021-06-30 17:45:34Z

0

I run into the same error and just fixed it by:

const currentName =  String(localStorage.getItem('FileName') || '');

edited Jun 30, 2021 at 17:45

Yunnosch

26.8k9 gold badges46 silver badges67 bronze badges

answered Jun 25, 2021 at 6:18

Ehrlich_Bachman

9724 gold badges16 silver badges25 bronze badges

2 Comments

Ehrlich_Bachman Over a year ago

At that time, I did not have the privilege. Since my answer provides a working solution, even short, this information seems to be more valuable, then a comment. Thanks, for the information. Btw., your comment does not seem to follow comment rules, too.

Yunnosch Over a year ago

Hi. I realised that you did not have and now have the privilege. I realised that this post actually is an acceptable answer. I just wanted to comment on the "I intentionally break a known rule" aspect, after cleaning it up, convinced that in this case it is not applicable. I would be interested in which way my comment is against the rules, please let me know. In serious cases you would of course be right to flag my comment.

Collectives™ on Stack Overflow

Typescript Error Type 'null' is not assignable to type

4 Answers 4

7 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related