TypeScript throwing error: Attempting to call a potentially 'undefined' object goes against coding principles

Question

TypeScript throwing error: Attempting to call a potentially 'undefined' object goes against coding principles

In the snippet below, an error is encountered:

example/not-following.ts:15:1 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

15 run(true).maybe();
   ~~~~~~~~~~~~~~~

Snippet:

interface Example {
    maybe?: () => void;
}

function execute(condition: boolean): Example {
    const object: Example = {};
    if (condition) {
        object.maybe = (): void => {
            console.log('maybe');
        };
    }
    return object;
}

execute(true).maybe();

Despite being deterministic code, TypeScript fails to track its flow. Why does this happen?

typescript

Answer 1

Answer №1

The solution was a technique known as generics. You can learn more about generics at this link: https://www.typescriptlang.org/docs/handbook/generics.html

interface Something {
    maybe?: () => void;
}

function execute<T extends boolean>(isTrue: T):
    T extends true
        ? Something & Required<Pick<Something, "maybe">>
        : Something {
    const object: Something = {};
    if (isTrue) {
        object.maybe = () => {
            console.log('maybe');
        };
    }

    // @ts-ignore
    return object;
}

execute(true).maybe();

// @ts-expect-error
execute(false).maybe();

Answer 2

The solution was a technique known as generics. You can learn more about generics at this link: https://www.typescriptlang.org/docs/handbook/generics.html

interface Something {
    maybe?: () => void;
}

function execute<T extends boolean>(isTrue: T):
    T extends true
        ? Something & Required<Pick<Something, "maybe">>
        : Something {
    const object: Something = {};
    if (isTrue) {
        object.maybe = () => {
            console.log('maybe');
        };
    }

    // @ts-ignore
    return object;
}

execute(true).maybe();

// @ts-expect-error
execute(false).maybe();

Answer 3

Answer №2

An error occurs when trying to call an object that may be 'undefined'.

This issue arises because the variable maybe is optional in TypeScript, making it unclear whether it has been defined or not.

To resolve this error, you need to first verify if the property exists:

   interface Something {
        maybe?: () => void;
    }

    function execute(condition: boolean): Something {
        const obj: Something = { };
        if (condition) {
            obj.maybe = (): void => {
                console.log('maybe');
            };
        }
        return obj;
    }

    const someObject: Something = execute(true);
    if (someObject.maybe) {
        someObject.maybe();
    }

Answer 4

An error occurs when trying to call an object that may be 'undefined'.

This issue arises because the variable maybe is optional in TypeScript, making it unclear whether it has been defined or not.

To resolve this error, you need to first verify if the property exists:

   interface Something {
        maybe?: () => void;
    }

    function execute(condition: boolean): Something {
        const obj: Something = { };
        if (condition) {
            obj.maybe = (): void => {
                console.log('maybe');
            };
        }
        return obj;
    }

    const someObject: Something = execute(true);
    if (someObject.maybe) {
        someObject.maybe();
    }

Answer 5

Answer №3

It seems that TypeScript is intelligent to some extent, but it may not be sophisticated enough to fully validate these types of runtime execution paths.

If you're looking for an alternative approach, utilizing closures could be another option, although its suitability for your specific case is uncertain.

interface Something {
    maybe: () => void;
}

function run(isTrue: boolean): Something {
  const object: Something = {
    maybe: () => {
      if (isTrue) {
        console.log('maybe');
      }
    }
  };
  return object;
}

run(true).maybe();

Note:

In response to the downvote I received (which I do not intend to contest), I would like to mention that to prevent errors in TypeScript, you should either:

make the maybe function mandatory, or
verify if the function is defined before each call.

I personally am not a fan of optional fields and do not wish to repeatedly enclose every call in an if statement. Thus, I still favor my current solution.

Answer 6

It seems that TypeScript is intelligent to some extent, but it may not be sophisticated enough to fully validate these types of runtime execution paths.

If you're looking for an alternative approach, utilizing closures could be another option, although its suitability for your specific case is uncertain.

interface Something {
    maybe: () => void;
}

function run(isTrue: boolean): Something {
  const object: Something = {
    maybe: () => {
      if (isTrue) {
        console.log('maybe');
      }
    }
  };
  return object;
}

run(true).maybe();

Note:

In response to the downvote I received (which I do not intend to contest), I would like to mention that to prevent errors in TypeScript, you should either:

make the maybe function mandatory, or
verify if the function is defined before each call.

I personally am not a fan of optional fields and do not wish to repeatedly enclose every call in an if statement. Thus, I still favor my current solution.

TypeScript throwing error: Attempting to call a potentially 'undefined' object goes against coding principles

Answer №1

Answer №2

Answer №3

Similar questions

Changing JSON names to display on a webpage

Is there a way to implement retry functionality with a delay in RxJs without resorting to the outdated retryWhen method?

Invoke a component's function in a different component

Securely import TypeScript modules from file paths that are dynamically determined during execution

Exploring ways to ensure robust typing for the body of NextApiRequest within a Next.js environment

Set up TypeScript to automatically deduce the type of generics based on a specific function name within the

Error: Query is not valid

How can the `!` operator be utilized in MikroORM Typescript entities?

Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?

Tips on distinguishing the original Ctrl+C and Ctrl+V commands from the Javascript-added document level listeners

Issue encountered with the props type upon import, Ts(2322)

What is the method for determining the constant array type based on its contents?

The presence of this container with Mongoose Schema Typescript eclipses an external 'this' value

Encountering a Problem with Angular 2 RC HTTP_PROVIDERS

Utilize TypeScript and HTTPS to send a message through WhatsApp

Securing React: Best Practices for State Management

Getting the Most Out of .find() in Angular 4

A Guide to Retrieving Parameters and Request Body using Express and Typescript

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Mapping specific properties in an object using Typescript