How come the type declaration ( () => string ) suddenly pops up?

Question

How come the type declaration ( () => string ) suddenly pops up?

I am currently utilizing the jasonwebtoken package and have encountered a new javascript/typescript behavior.

interface JwtPayload {
    [key: string]: any;
    iss?: string | undefined;
    sub?: string | undefined;
    aud?: string | string[] | undefined;
    exp?: number | undefined;
    nbf?: number | undefined;
    iat?: number | undefined;
    jti?: string | undefined;
}
let payload: JwtPayload | string
let id: string | undefined

id = payload.sub

When attempting the assignment, an error is thrown. What could be causing this issue?

Type 'string | (() => string) | undefined' is not assignable to type 'string | undefined'.
Type '() => string' is not assignable to type 'string'.(2322)

TS Playground

typescript

Answer 1

Answer №1

You have defined the variable payload as either a JwtPayload or a string:

let payload: JwtPayload | string

This means that accessing payload.sub can refer to either the sub property of JwtPayload or the sub property of a string.

Interestingly, there is a sub method for strings called String.prototype.sub(), which returns a type of () => string. So, this behavior is not unexpected.

In order to assign payload.sub to a variable like id, you must ensure that payload is indeed a JwtPayload and not a string:

if (typeof payload !== 'string') {
    id = payload.sub;
}

This way, the compiler can correctly infer the type as JwtPayload, allowing you to access payload.sub with the expected type safety.

Alternatively, you can forcefully assert that payload has the assumed type, but this essentially silences the compiler warnings and risks potential errors at runtime.

Answer 2

You have defined the variable payload as either a JwtPayload or a string:

let payload: JwtPayload | string

This means that accessing payload.sub can refer to either the sub property of JwtPayload or the sub property of a string.

Interestingly, there is a sub method for strings called String.prototype.sub(), which returns a type of () => string. So, this behavior is not unexpected.

In order to assign payload.sub to a variable like id, you must ensure that payload is indeed a JwtPayload and not a string:

if (typeof payload !== 'string') {
    id = payload.sub;
}

This way, the compiler can correctly infer the type as JwtPayload, allowing you to access payload.sub with the expected type safety.

Alternatively, you can forcefully assert that payload has the assumed type, but this essentially silences the compiler warnings and risks potential errors at runtime.

How come the type declaration ( () => string ) suddenly pops up?

Answer №1

Similar questions

Utilize Material-UI in Reactjs to showcase tree data in a table format

Converting a text file to JSON in TypeScript

Using class-validator in Node.js to validate arrays of objects

Experiencing difficulty creating query files for the apollo-graphql client

Hermes, the js engine, encountered an issue where it was unable to access the property 'navigate' as it was undefined, resulting

What is causing the warnings for a functional TypeScript multidimensional array?

Customize back button functionality in Ionic 2

Defining the range of an array of numbers in TypeScript: A complete guide

Angular (TypeScript) time format in the AM and PM style

employing constructor objects within classes

Generate an interactive sitemap.xml in ReactJS for each request made to http://example.com/sitemap.xml

How can I add a new key value pair to an existing object in Angular?

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

TypeORM - Establishing dual Foreign Keys within a single table that point to the identical Primary Key

How can the return type of a function that uses implicit return type resolution in Typescript be displayed using "console.log"?

Utilizing Angular 2 for Element Selection and Event Handling

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

What is the most effective method for designing a scalable menu?

It appears there was a mistake with [object Object]

Can ngFor be utilized within select elements in Angular?