使用键值管道进行打字稿类型检查

Posted 2023-03-13

【中文标题】使用键值管道进行打字稿类型检查

【英文标题】：Typescript type checking with keyvalue pipe

【发布时间】：2021-05-12 09:16:25

【问题描述】：

我正在处理一个 Ionic/Angular 项目，我正在尝试消除 html 文件中的类型检查问题。

我的 .ts 文件中有这样的 hTest 变量

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

Typescript 似乎对此很满意。然后我像这样在我的 html 视图中循环显示它们

但是，当我使用 usr.value.fn 或 usr.value.ln 在 html 中使用 keyvalue 管道访问它们时，打字稿不理解 fn 和 ln 是什么（红色下划线）。但是它会正确打印出来，如下所示，所以它确实得到了值。

这是我在 Visual Studio 上使用的 TS 版本 tsc --version gives Version 4.1.3

如何让 Typescript 理解上面 html 中的 fn 和 ln 变量，而不让它通过下划线显示语法错误？

谢谢， 桑杰。

【问题讨论】：

请考虑修改此示例中的代码以构成一个 minimal reproducible example 适合放入独立 IDE 中，例如 The TypeScript Playground，这可以说明您的问题。或者，除此之外，提供指向正确配置的 Web IDE 项目的链接，以演示您的问题。在任何情况下，如果所有代码和错误都可以以纯文本而不是图像的形式呈现，这将很有帮助（请参阅Please do not upload images of code/errors when asking a question.）

谢谢@jcalz。查看下面提供的代码以剪切粘贴。认为使用变量声明和下面的视图代码非常容易。希望这会有所帮助。如果仍然需要，我可以设置 Playground。谢谢。 usr.key usr.value | json usr.value.fn usr.value.ln

我删除了我的原件，因为它无效。您可能想要做这样的事情，以便 ide 接他们。 ***.com/questions/35453630/…

如果没有适合 Playground 的 minimal reproducible example，我可能无法做很多事情（特别是因为我对 ionic-framework 一无所知）......也许其他人没有更多的洞察力它。

谢谢@jcalz。这与 Ionic 没有直接关系。下面的代码相同，div 和 span 在 ln 和 fn 下有波浪线 <div *ngFor="let usr of hTest | keyvalue"> <span>usr.key usr.value | json usr.value.fn usr.value.ln</span> </div> 在您的 TS 文件中设置此值 hTest: [k:string]: fn:string, ln:string = 'user1': fn: 'f1', ln: 'l1', 'user2': fn: 'f2', ln: 'l2'; 问题是我们如何让 IDE 识别 usr.value.fn usr.value.ln，因为它目前没有。感谢您的任何见解。希望对您有所帮助。

【参考方案1】：

您的问题是关于输入的错误警告消息。它与 Angular 提供的KeyValuePipe 有关。您可以通过在 IDE 中启用名为 Ivy 的新 Angular 语言服务来解决此问题。

这里有一个演示相同问题的错误报告：Generics do not correctly infer in template pipe usage。

如何在 Visual Studio Code 中启用 Ivy：https://github.com/angular/vscode-ng-language-service/releases/tag/v11.1.0