"Unresolved variable <variable>", allthoug the type of the object is declared

Issue

In Angular 17, I use

@for (notification of notifications; track notification) {
   <i>{{notification.quotationId}}</i> 
}

but in WebStorm I get the warning

Unresolved variable quotationId

In TypeScript, the type of the property notifications is set to PendingQuotations, which is:

export type PendingQuotations = {
  quotationId: number,
  sender: string,
  date: string
}[]

Why do I get this warning?

This is how I set the property:

export class HeaderComponent implements OnInit {
  public notifications?: PendingQuotations;

  constructor(private generalService: GeneralService) { }

  ngOnInit(): void {
    this.$getNotifications().subscribe((pendingQuotations: PendingQuotations) => {
      if (pendingQuotations.length > 0) {
        this.notifications = pendingQuotations;
      }
    });
  }

  $getNotifications(): Observable<PendingQuotations> {
    return this.generalService.get<Response>('/quotation/pending-quotations')
      .pipe(
        map((res: Response) => res.messages[0] as unknown as PendingQuotations)
      );
  }
}

This is is the value of res:

{
    "code": "PENDING_QUOTATIONS",
    "status": "OK",
    "timestamp": "13.01.2024, 14:33:24",
    "messages": [
        [
            {
                "id": 1,
                "quotationId": 2,
                "receiver": "receiver@example.com",
                "sender": "sender@example.com",
                "date": "2024-01-13T09:27:59.256+00:00"
            }
        ],
        "I am a string"
    ],
    "token": null
}

Solution

Instead of {{notification.quotationId}}, you may use the following:

{{notification["quotationId"]}}

This is a quick-fix, which is also suggested by WebStorm.

Answered By - Reza Saadati