有没有办法向模板输入变量添加类型断言/注释？

Question

背景

我有一个看起来像这样的模板（我正在使用一些组件，它使用它作为重复项的基础，它是 <p-pickList>，但问题并不特定于该组件，仅作为示例）

对于背景，假设我有一个类型 Foo 并且我的组件有一个 foos: Foo[]，我将它提供给 [source] 属性下的 <p-pickList> 组件，它执行内部 *ngFor 为它，我所要做的就是提供一个模板

 <ng-template let-foo pTemplate="item">
   ...
   {{ foo.anythingGoesHereWithNoWarningAndNoAutocomplete }}

但是，foo 上的类型信息似乎丢失了。

我是类型安全的忠实拥护者，我喜欢 Intellij（或任何其他编辑器）如果在模板中执行诸如指定 foo 的无效属性之类的操作，可以向我显示警告

如果我有一个普通的*ngFor，它会推断出foo的类型

<div *ngFor="let foo of foos">
  {{ foo.autoCompleteWorksInMostIDEsAsWellAsWarningIfInvalidProp }}

问题：

1. 是否有任何语法可以让我提示let-foo 的类型？ （希望大多数 IDE 都能识别）。

2. 如果我不想依赖 IDE，有没有办法让 ng 编译器类型检查 foo（由 let-foo 声明）？

tl;dr 是否有让我键入注释模板输入变量的语法？ 例如类似这样的语法？

let-foo="$implicit as Foo" 或 let-foo-type="Foo"?

解决方法

一个愚蠢的想法是在我的组件中有一个标识函数，例如

identity(foo: Foo): Foo {
  return foo;
}

但是做

{{ identity(foo).fooProp }}

相对于

来说进步不大

{{ (foo as Foo).fooProp }}`

Answer 1

让我们看看 Angular 与它有什么相似之处以及它是如何工作的！

<p *ngFor="let number of [{v: 101},{v: 102}, {v: 103}]">{{number.v}}</p>

我们可以在没有*魔法的情况下重写它

<ng-template ngFor let-number [ngForOf]="[{v: 101},{v: 102}, {v: 103}]">
  <p>{{number.v}}</p>
</ng-template>

没有观察者 (ngDoCheck) 可以与 (但ngTemplateOutlet have no typecheck) 相同：

<ng-template let-number #templateRef>
  <p>{{number.v}}</p>
</ng-template>
<ng-container *ngTemplateOutlet="templateRef; context: {$implicit: {v: 101}}"></ng-container>
<ng-container *ngTemplateOutlet="templateRef; context: {$implicit: {v: 102}}"></ng-container>
<ng-container *ngTemplateOutlet="templateRef; context: {$implicit: {v: 103}}"></ng-container>

或者我们可以自己创建

// template
<button (click)=create(templateRef)>create</button>

// TS
constructor(private _viewContainerRef: ViewContainerRef) { ... }

create(templateRef: TemplateRef<{$implicit: {v: number;}}>) {
    this._viewContainerRef.createEmbeddedView(templateRef, {$implicit: {v: 101}});
    this._viewContainerRef.createEmbeddedView(templateRef, {$implicit: {v: 102}});
    this._viewContainerRef.createEmbeddedView(templateRef, {$implicit: {v: 103}});
}

TL;DR

模板类型检查魔法发生在viewContainerRef.createEmbeddedView 中。 （例如ngFor）； 但它假设 templateRef 接受什么。

Angular 可以编译在AOT:

<p *ngFor="let num of [{v:1}, {v:2}]">
  {{num.does.not.exist.completly}}
</p>

据我了解，我们应该假设模板具有哪些类型，但要检查模板何时被实例化（createEmbeddedView）；

Answer 2

问题是没有任何类型信息。 <ng-template let-foo pTemplate="item"> - 只是模板声明，它还没有绑定到任何类型/上下文，只是一些具有或可能具有 anythingGoesHereWithNoWarningAndNoAutocomplete 字段的动态类型。如果没有适当的泛型支持，就不可能拥有这种类型安全。

Answer 3

发现了这个问题并提出了允许模板输入变量发布类型信息的解决方案，以便 IDE 可以在 github here 上提供更好的补全。此功能目前正在开发中，希望它会在 Angular 的未来版本中推出。你现在应该在 VS Code 或 Sublime Text 中使用 Angular Language Service 扩展名。您可以放心扩展的支持，因为它正在由 Angular 团队开发。欲了解更多信息，请查看此readme 和 docs。

正如你提到的，它可以通过使用标识函数来实现，但它会导致严重的性能问题，并且为不同类型维护此功能会很麻烦。

Answer 4

这可以通过将变量包装在另一个 ng-template

中来解决

这在某种程度上是另一种解决方法，但我比这里的其他解决方案更喜欢它，因为它只是在 HTML 中增加了 2 行代码，当然如果你只使用你的变量 1 或 2 次 this other solution更好。我的回答：

而不是这个：

<p *ngTemplateOutlet="foo; context: {$implicit: {fooProp: 'Hello!'}}"></p>
<ng-template #foo let-args>
    This is untyped: {{ args.fooProp }}<br>
</ng-template>

这样做：

<p *ngTemplateOutlet="foo; context: {$implicit: {fooProp: 'Hello!'}}"></p>
<ng-template #foo let-untypedArgs>
    <ng-template [ngIf]="identity(untypedArgs)" let-args="ngIf">
        This is typed: {{ args.fooProp }}<br>
    </ng-template>
</ng-template>

identity(foo: Foo): Foo {
    return foo;
}

正如大家已经说过的，在使用*ngFor 时，IDE 会注意到类型断言。它在使用*ngIf 时也有效。当然，这种解决方案有一个缺点，因为内部的 <ng-template> 会因为 [ngIf] 而在稍后呈现。

有了这个，现在如果你在你的上下文中添加一个无效的属性，你会得到以下编译错误，这很好，here's a stackblitz demo：

类型“Foo”上不存在属性“newFooProp”。

我通过阅读documentation here 想出了这个解决方案：

我测试了这个解决方案，并使用带有angularCompilerOptions 属性enableIvy 和fullTemplateTypeCheck 设置为true 的vscode 在Angular 11 上工作。

另外，应该安装Angular Language Service，即使安装了ALS，也需要这个解决方案，因为模板可以从任何地方调用，所以ALS没有办法知道正在传递的上下文参数.这可以在我添加的stackblitz demo 中轻松测试，只需将fooProp 重命名为fooProp1，您会看到未键入的示例显示一个空值，而键入的则抛出错误。

Answer 5

VSCode 应该具有开箱即用的功能，刚刚在 stackblitz 中进行了测试：https://stackblitz.com/edit/angular-type-assertion?file=src/app/app.component.html