Truthy value check, but red highlighting for undefined

Describe the bug

If you check a variable in HTML has a truthy value (not null, not undefined, …) and call then a method on it, I get an error with unknown method because VSCode believes object can be undefined.

Example:

{{ foo && foo.bar() }}

In my example, I consider foo : Type | undefined;

To Reproduce

Just implement a similar simple foo attribute in an Angular component and try to call a method in the template checking truthy first.

Expected behavior

No red highlighting as value is checked using foo &&

Screenshots

In this case, startModelInstance is defined as public startModelInstance?: ModelInstance;

[andrius-pra]

you can use this example:

import { Component } from '@angular/core';
@Component({
  selector: 'issue',
  template: `
    {{ element && element.blur() }}
                  ~~~~~~~~~~~~~~~
                  Unknown method 'blur'

  `,
})
export class ApiListComponent {
  element?: HTMLInputElement;
}

[andrius-pra]

I was also unable to reproduce the error with the example that @andrius-pra showed.

Use strict mode in tsconfig:

  "compilerOptions": {
    "strict": true
  },