Type 'null' is not assignable to type 'string'. Angular/TypeScript

Question

I have an error message:

Type 'null' is not assignable to type 'string'.

I found a solution here but I didn't understand the answers for my problem.

My code is presented like this:

const expectedRole = route.data['expectedRole'];
const token = localStorage.getItem('token');
    
const { userName, roleId } = decode(token);
console.log(roleId);

Edit 2022-02-02

decode method

export class InvalidTokenError extends Error {}

export interface JwtDecodeOptions {
  header?: boolean;
}

export interface JwtHeader {
  type?: string;
  alg?: string;
}

export interface JwtPayload {
  iss?: string;
  sub?: string;
  aud?: string[] | string;
  exp?: number;
  nbf?: number;
  iat?: number;
  jti?: string;
}

export default function jwtDecode<T = unknown>(
  token: string,
  options?: JwtDecodeOptions
): T;

FYI, I copied the code from the project here

Can you specify what did you not understand? I can then explain accordingly — Phalgun
– Phalgun, Commented Feb 1, 2022 at 21:56
@Phalgun: Sorry, I don't understand how to solve this problem, please. — solange
– solange, Commented Feb 1, 2022 at 22:04
Does this answer your question? Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string' — Michael Freidgeim
– Michael Freidgeim, Commented Feb 17, 2023 at 3:56

Chris Hamilton · Accepted Answer · 2022-02-01 23:47:10Z

3

This is just the typescript compiler telling you that token may be null. So you need to check that it isn't before using it in the decode function, since decode does not accept a null parameter.

const expectedRole = route.data['expectedRole'];
const token = localStorage.getItem('token');

if (token) const { userName, roleId } = decode(token);
console.log(roleId);

You can also force the typescript compiler to ignore this using !, which says "this variable will be truthy, trust me", but you need to be absolutely sure it will never be null, or you may get a runtime error.

const expectedRole = route.data['expectedRole'];
const token = localStorage.getItem('token');
    
const { userName, roleId } = decode(token!);
console.log(roleId);

Edit

This solution should work regardless, but you should define the correct return types for decode

const expectedRole = route.data['expectedRole'];
const token = localStorage.getItem('token');

if (token) const info: { userName, roleId } = decode(token);
console.log(info.roleId);

OR

const expectedRole = route.data['expectedRole'];
const token = localStorage.getItem('token');

if (token) const info: any = decode(token);
console.log(info.roleId);

Edit 2

Looks like decode is a generic function, so you can define the return type like this:

const expectedRole = route.data['expectedRole'];
const token = localStorage.getItem('token');

if (token) const { userName, roleId } = decode<{ userName, roleId }>(token);
console.log(roleId);

edited Feb 1, 2022 at 23:47

answered Feb 1, 2022 at 23:14

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

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

7 Comments

solange Over a year ago

Thank you, I took the first solution. I just have a little problem with if (token) const { userName, roleId } = decode(token);, I have an error message Property 'roleId' does not exist on type 'unknown' and Property 'userName' does not exist on type 'unknown' I don't understand why it keeps bugging?

Chris Hamilton Over a year ago

What is the return type of decode?

solange Over a year ago

I edited my first post, I put a screenshot at the end of the post with the error, (thanks)

Chris Hamilton Over a year ago

Show me the decode function please

Christian Vincenzo Traina Over a year ago

If I'm not wrong, the exclamation mark is discouraged, and token as string should be used instead

|

Adrian Mole · Accepted Answer · 2022-09-05 12:09:01Z

I was able to fix the problem by modifying this:

export class RoleGuard implements CanActivate {

  constructor(
    private authService: AuthService,
    public router: Router
  ){ }
  canActivate(route: ActivatedRouteSnapshot):boolean{
    const expectedRole = route.data.expectedRole;
    const token = localStorage.getItem('token');

const { userName, roleId } = decode(token);
console.log(roleId);

if( !this.authService.isAuth() || roleId !== expectedRole){
  console.log('Usuario no autorizado para la vista');
  this.router.navigate(['login']);
  return false;
}
return true;
  }  
}

To this:

export class RoleGuard implements CanActivate {

  constructor(
    private authService: AuthService,
    public router: Router
  ) { }
  canActivate(route: ActivatedRouteSnapshot): boolean {
    const expectedRole = route.data['expectedRole'];
    const token = localStorage.getItem('token');

    if (!this.authService.isAuth()) {

      console.log('Usuario no autorizado para la vista');
      this.router.navigate(['login']);
    };
    const info: { userName: string, roleId: string } = decode(token);
    if (info.roleId != expectedRole) {
      console.log('Usuario no autorizado para la vista');
      this.router.navigate(['login']);

      return false;
    }
    return true;
  }
}

I separated the if into two ifs, each one performing an independent activity.

Gianfabio Pezzolla · Accepted Answer · 2022-02-01 22:44:02Z

0

Thinking like typescript thinks, you need to define a type (i.e. "string", "number", "void") for variables as well as functions or methods.

Ones you have defined type for variables (or for methods), typescript check if its type match with its definition.

In your case token is probably null and typescript alert you that string not match with null and rise an error.

So you need to debug token and check if:

is not null nor undefined
is a string

In some cases you need to declare type of variable in the following way:

token: string = ...

answered Feb 1, 2022 at 22:44

Gianfabio Pezzolla

3992 silver badges9 bronze badges

Collectives™ on Stack Overflow

Type 'null' is not assignable to type 'string'. Angular/TypeScript

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related