1

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

enter image description here

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.

enter image description here

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.

Sanjay Tibrewal
  • 121
  • 13
  • 1
    Please consider modifying the code in this example to constitute a [mcve] suitable for dropping into a standalone IDE like [The TypeScript Playground](https://tsplay.dev/ymAY1m) 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.](//meta.stackoverflow.com/q/285551)) – jcalz Feb 08 '21 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. {{usr.key}} {{usr.value | json}} {{usr.value.fn}} {{usr.value.ln}} – Sanjay Tibrewal Feb 08 '21 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. https://stackoverflow.com/questions/35453630/creating-model-classes-in-typescript –  Feb 08 '21 at 20:29
  • I probably won't be able to do much without a [mcve] suitable for the Playground (especially since I don't know anything about ionic-framework)... maybe others have more insight without it. – jcalz Feb 08 '21 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 `
    {{usr.key}} {{usr.value | json}} {{usr.value.fn}} {{usr.value.ln}}
    ` 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 Feb 09 '21 at 18:13
  • @E.Maggini I looked through the article and I am not quite sure what I can do here to solve it. I have the hash type specified in place with `{[k:string]: {fn:string, ln:string}}` instead of declaring a separate Type for it. Please share if you have any specific suggestion to try that might address the issue. Thank you. – Sanjay Tibrewal Feb 09 '21 at 18:29

1 Answers1

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

mcoolive
  • 3,805
  • 1
  • 27
  • 32