Angular Save Navigation Operator not working as expected

I'm running into an issue where the Safe Navigation Operator (?) is not working as intended.

task = {
    title: 'Review applications',
    assignee: null
};
test = this.task.assignee?.name;

Produces the following error:

TS2339: Property 'name' does not exist on type 'never'.

Current Environment

• Angular CLI: 17.3.8
• Node: 20.13.1
• Package Manager: npm 10.5.2
• Typescript: 5.4.2

I had done a search and found a similar issue, but it revolves around using an older version of typescript, of which I am using a newer version, and would think this issue would not exist at this time:

• Angular gives an error when use safe navigation operator

Additional information on how Safe Navigation Operators should work can be found here:

• https://docs.angular.lat/guide/template-expression-operators
• Live Example: https://stackblitz.com/angular/apjvqexeoxn?file=src%2Fapp%2Fapp.component.html
• Within the Live Example:
• File app.component.ts

Line 26:   nullItem = null;

• File app.component.html

Line 52: <p>The null item's name is: {{nullItem?.name}}</p>

How can I solve this issue?

Try defining the interface highlighting to typescript that value can be present or can be null! Else it will infer the type of assignee is null based on the value and this is giving you the error!

export interface Task {
    title: string;
    assignee: {name:string} | null;
}

task: Task = {
    title: 'Review applications',
    assignee: null
};
test = this.task.assignee?.name;