An object may be null when its type is A or undefined, but we are certain it is not undefined

Question

An object may be null when its type is A or undefined, but we are certain it is not undefined

Since the release of version 4.8.4, the TypeScript compiler has been flagging an issue with the following code:

type A = {v: number}

function get_the_first<T>(xs: T[]): T | undefined {
    if (xs.length > 1)
        return xs[0];
    else
        return undefined
}

function foo<T>(xs: T[], fielddb: keyof T) {

    let a: T | undefined = get_the_first(xs);

    if (a === undefined) {

    } else {
        console.log(a[fielddb]); // Error: Object is possibly 'null'  
    }

}

foo([{v: 42}], 'v')

Playground

I can't quite figure out why this warning message is appearing. The variable a is either of type T or undefined, and it's already confirmed to not be undefined.

Unless the issue lies in the fact that the compiler considers the generic type T may include the null type. If that's the case, what would be the best way to address this warning?

typescript

Answer 1

Answer №1

T type parameter has no constraints and can be anything, typically represented as:

type T = {} | null | undefined

You have removed undefined, but not null. That's the issue TypeScript is indicating.

You could modify the condition to:

if (a == null) {

… which is essentially equivalent to (if avoiding the == operator):

if (a === null || a === undefined) {

Give it a shot.

Answer 2

T type parameter has no constraints and can be anything, typically represented as:

type T = {} | null | undefined

You have removed undefined, but not null. That's the issue TypeScript is indicating.

You could modify the condition to:

if (a == null) {

… which is essentially equivalent to (if avoiding the == operator):

if (a === null || a === undefined) {

Give it a shot.

Answer 3

Answer №2

Absolutely right, the compiler acknowledges that if T contains null, then a might end up being null since you are only checking for undefined. Nevertheless, fixing it is straightforward; simply also check for null:

if (a === undefined || a === null) {

} else {
    console.log(a[fielddb]);
}

Some prefer to succinctly write this as

if (a == null) {

However, I prefer to be explicit and not rely on JavaScript's unpredictable nature.

Refer to jcalz's response here: Checking an optional generic parameter for undefined results in T & ({} | null)

Playground

Answer 4

Absolutely right, the compiler acknowledges that if T contains null, then a might end up being null since you are only checking for undefined. Nevertheless, fixing it is straightforward; simply also check for null:

if (a === undefined || a === null) {

} else {
    console.log(a[fielddb]);
}

Some prefer to succinctly write this as

if (a == null) {

However, I prefer to be explicit and not rely on JavaScript's unpredictable nature.

Refer to jcalz's response here: Checking an optional generic parameter for undefined results in T & ({} | null)

Playground

Answer 5

Answer №3

There are multiple ways to tackle the problem at hand, and none of them is necessarily the only correct one.

If I were to approach this situation, I would introduce a constraint to the generic with the following syntax:

function myFunction<T extends MyObject>(arr: T[], prop: keyof T) { ... }

Here, MyObject represents the expected shape or structure of the object.

Answer 6

There are multiple ways to tackle the problem at hand, and none of them is necessarily the only correct one.

If I were to approach this situation, I would introduce a constraint to the generic with the following syntax:

function myFunction<T extends MyObject>(arr: T[], prop: keyof T) { ... }

Here, MyObject represents the expected shape or structure of the object.

An object may be null when its type is A or undefined, but we are certain it is not undefined

Answer №1

Answer №2

Answer №3

Similar questions

The services generated by OpenAPI Generator typescript-angular are experiencing failures

Leveraging Class Types with Generics

Configuring environment variables during Jest execution

ContentChildren to gather all offspring

The constructor in Angular 2 service is operational, however, other functions within the service are experiencing issues

The debate between using "this" versus "classname" to access static elements in

Triggering Backbutton actions in Ionic 3Just a heads-up

Tips for incorporating SectionList sections in React Native using an array

Comparison between TypeScript's variable scope and JavaScript's variable scope

QueryFailedError: Null values found in the "price" column - TypeORM - PostgreSQL

Experiencing a hitch when attempting to deploy an Angular 2 application on Heroku

Issue: The TypeError reported is due to the absence of any definition for "_co.category.category_type"

Tips for validating an object with unspecified properties in RunTypes (lowercase object type in TypeScript)

Automatically fill in 'Edit' within an open Dialog using Angular Material

My app is having trouble updating routes correctly. Can anyone provide guidance on how to configure routeConfig properly for my application?

When trying to pass props into setup using VueJS 3 Composition API and TypeScript, an error may occur stating: "Property 'user' does not exist on type"

A step-by-step guide to resolving the TS2345 compilation error during your TypeScript upgrade from version 4.7 to 4.8

The error message "Unable to find 'encoding'" in NextJS is triggered by the use of try/require in the node_modules folder

The type 'Readonly<Ref<Readonly<any>>>' does not have the property 'forEach' available

Unable to display grid items in React material-ui grid list