Typescript type checking with keyvalue pipe

Question

I am working on an Ionic/Angular project and I am trying to eliminate the type checking issue in html file.

I have hTest variable in my .ts file like this

     hTest: {[k:string]: {fn:string, ln:string}} = {'user1': {fn: 'f1', ln: 'l1'}, 'user2': {fn: 'f2', ln: 'l2'}};

Typescript seems happy with that. And I loop over to display them in my html view like this

But typescript doesn't understand what fn and ln are (underlines in red) when I access them with usr.value.fn or usr.value.ln in html as above with keyvalue pipe. However it prints them out correctly, as below, so it does get the values.

This my TS version tsc --version gives Version 4.1.3 using on Visual Studio

How can I make Typescript understand the fn and ln variables in html above and not have it show syntax error by underlining?

Thanks, Sanjay.

Please consider modifying the code in this example to constitute a minimal reproducible example suitable for dropping into a standalone IDE like The TypeScript Playground which demonstrates your issue. Or, barring that, provide a link to a properly configured web IDE project that demonstrates your issue. In any case, it is helpful if all code and errors can be presented in plain text and not as images (see Please do not upload images of code/errors when asking a question.) — jcalz
– jcalz, Commented Feb 8, 2021 at 19:58
Thank you @jcalz. View code provided below to cut paste. Thought it is pretty easy to use the variable declaration and the view code below. Hopefully that helps. If still needed I can setup the Playground. Thanks. <ion-item *ngFor="let usr of hTest | keyvalue"> <ion-label>{{usr.key}} {{usr.value | json}} {{usr.value.fn}} {{usr.value.ln}}</ion-label> </ion-item> — Sanjay Tibrewal
– Sanjay Tibrewal, Commented Feb 8, 2021 at 20:14
I deleted my original since it wasn't valid. You likely want to do something like this so the ide picks them up. stackoverflow.com/questions/35453630/… — user796446
– user796446, Commented Feb 8, 2021 at 20:29
I probably won't be able to do much without a minimal reproducible example suitable for the Playground (especially since I don't know anything about ionic-framework)... maybe others have more insight without it. — jcalz
– jcalz, Commented Feb 8, 2021 at 20:41
Thanks @jcalz. This is not directly related to Ionic. Same code below, with div and span has squiggles under ln and fn <div *ngFor="let usr of hTest | keyvalue"> <span>{{usr.key}} {{usr.value | json}} {{usr.value.fn}} {{usr.value.ln}}</span> </div> Set this value in your TS file hTest: {[k:string]: {fn:string, ln:string}} = {'user1': {fn: 'f1', ln: 'l1'}, 'user2': {fn: 'f2', ln: 'l2'}}; Question is how do we get the IDE to recognize {{usr.value.fn}} {{usr.value.ln}} as it currently doesn't. Thanks for any insights. Hope that is helpful. — Sanjay Tibrewal
– Sanjay Tibrewal, Commented Feb 9, 2021 at 18:13

mcoolive · Accepted Answer · 2021-03-14 00:55:04Z

1

Your issue is a wrong warning message about typing. It is related to KeyValuePipe provided by Angular. You can solve this issue by enabling the new Angular-language-service named Ivy in your IDE.

Here a bug report that demonstrates the same issue: Generics do not correctly infer in template pipe usage.

How to enable Ivy in Visual Studio Code : https://github.com/angular/vscode-ng-language-service/releases/tag/v11.1.0

answered Mar 14, 2021 at 0:55

mcoolive

4,2653 gold badges31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript type checking with keyvalue pipe

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related