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

Issue

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

Solution

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);

Answered By - Chris Hamilton