TSC Strict mode error TS2722: Cannot invoke an object which is possibly 'undefined'.

[jameshmread]

TypeScript Version: 2.7.2
Have also reproduced with typescript@next (3.5.0-dev.20190525).

Application insights version: 1.0.20

Search Terms:
error TS2722 cannot invoke an object which is possibly 'undefined'.
typescript error
Application insights

Code

I am moving our codebase, incrementally to use strict null checks using a new tsconfig.strict.json below.

{
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
        "noEmit": true,
        "strictNullChecks": true
    },
    "include": [
        "app/menus/",
        "app/layout/",
        "app/core/"
    ],
    "exclude": [
        "**/*.module.ts",
        "**/*.spec.ts"
    ]
  }
  

Here are the relevant parts of the file in question ApplicationInsights.ts...

import { AppInsights as appInsights } from 'applicationinsights-js';
...
    constructor(private readonly appConfig: AppConfigProvider) {
            if (appInsights && !appInsights.config && this.config) {
                appInsights.downloadAndSetup(this.config);
            }
    }

Note: I have also tried being explicit with a constant as seen below and receive the same error...

   constructor(private readonly appConfig: AppConfigProvider) {
        const ai = appInsights;
        if (ai !== void 0) {
            if (!ai.config && this.config) {
                ai.downloadAndSetup(this.config);
            }
        }
    }

Expected behavior:
No error is thrown by tsc compiler.
Actual behavior:
src/application-insights/ApplicationInsights.ts(25,17): error TS2722: Cannot invoke an object which is possibly 'undefined'.

i.e. it believes that appInsights (or ai ) is undefined even inside a check to prevent it from being undefined.

Thanks in advance.

Related Issues:
Related Issues: #22385 (dupe of 10530) #10530

[dragomirtitian]

Firstly, this is more of a question, generally this is not the forum for such questions (SO is a better place to ask something like this).

Secondly, this is not a typescript issue. From the definition file of the library:

downloadAndSetup?(config: Microsoft.ApplicationInsights.IConfig): any;

So downloadAndSetup ca be undefined according to the definitions (due to the ? marking it as optional) and so typescript is right to issue an error as you have not checked downloadAndSetup is not undefined.

If you believe downloadAndSetup can't be undefined file a bug on that package. You can fix this on the ts side, either by adding the check or by using the not null assertion (!)

ai.downloadAndSetup!(this.config);  // assert not null 

if(ai.downloadAndSetup){ // or do the check 
  ai.downloadAndSetup(this.config);
}

[jameshmread]

Thanks for the swift reply. Your solution fixed the issue.

I think the confusion arose from the positioning of the error marker? (25,17). The 17th character was the start of ai so it looked more like ai was potentially undefined rather than the function.

Would it not be more correct to label it on the actual method e.g. (25,19 / 20) ?

[dragomirtitian]

@jameshmread this PR #31414 might also change the error span for this case, maybe try it again after the PR is merged and see if it makes things more clear in this case as well.

[DaSchTour]

I found this issue here and wonder if there might be some buggy behaviour in this place. I have this pretty simple code which throws errors about possibly undefined functions although I have a check before calling the functions.

the functions useFactory, useExisting and useClass are all optional and for all of them the compiler complains.

private static createAsyncOptionsProvider(options: ServiceConnectorModuleAsyncOptions): Provider {
  if (options.useFactory) {
      return {
        provide: ENDPOINT_CONFIGURATION,
        useFactory: async (...args: any[]) => await options.useFactory(...args),
        inject: options.inject || [],
      };
    } else if (options.useExisting || options.useClass) {
      return {
        provide: ENDPOINT_CONFIGURATION,
        useFactory: async (optionsFactory: ServiceConnectorOptionsFactory) => await optionsFactory.createOptions(),
        inject: [options.useExisting || options.useClass],
      };
    } else {
      throw new Error('useClass, useExisting and useFactory not provided');
    }
}

[jeremybradbury]

@DaSchTour I also found this to be a problem/bug. using typescript@4.7.4 and eslint-config-airbnb-typescript@^16.1.0

here's my .tsconfig:

{
  "compilerOptions": {
    "strict": true,
    "alwaysStrict": true,
    "module": "CommonJS",
    "target": "ES2020",
    "moduleResolution": "Node",
    "lib": ["ES2021"],
    "incremental": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "rootDir": ".",
    "outDir": "./dist",
    "baseUrl": "./"
  },
}

Here's a screenshot:

the first one is permitted, the second one is not. both objects are the same type, only the first object is optional and both objects have both functions (warn and debug) required, not optional.

both lint and building fail on a simple optional logger object.

Happy to open a new issue, but I am working with proprietary code here. so i'd have to build a new clean/open project to repro when I have more time.

Mainly wanted to add my +1 for other folks who found this thread and maybe even get some maintainer eyes on this problem.

[RyanCavanaugh]

Please open a new issue with a reproducible example.