Question

具有类似

的标记

    <mat-cell *matCellDef="let request">
         <a [href]="request.url" target="_blank">{{request.requestId}}</a>
    </mat-cell>

我可以以某种方式键入IDE的请求，该请求的类型为Request吗？我在这里使用IntelliJ。

请注意，我在这里使用Angular Material表，因此在组件中声明request不是一个选项，因为它纯粹是模板变量。它包含每次行迭代时组件本身内部提供的行数据。

Idk为什么拒绝投票，但也许是因为它看起来像无效的标记-很好，它是MatDataTable组件中使用的完全有效的标记。

Answer 1

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

中来解决

当使用 *ngFor 或 *ngIf 时，类型断言为 noticed by the IDE。这是另一种解决方法，但我比其他解决方案更喜欢它，因为它只是在 HTML 中添加了 2 行代码，当然，如果您只使用变量 1 或 2 次 this other solution 会更好。我的回答：

取而代之的是：

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

这样做：

<ng-template *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;
}

有了这个，现在如果你在你的上下文中添加一个无效的属性，你会得到以下编译错误，这很好，here's a stackblitz demo，这个解决方案的缺点是内部 <ng-template> 是由于 [ngIf].

<块引用>

属性 'newFooProp' 在类型 'Foo' 上不存在。

这与我在 this other question 给出的答案相同。

Answer 2

为

tableDataSource: MatTableDataSource<ToDoInterface>;

不键入模型，

此：

<ng-container matColumnDef="toDo">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>ToDo</th>
  <td mat-cell *matCellDef="let model">
    <ng-container *ngIf="assertItemType(model) as toDoModel">
      {{toDoModel.toDo}}
    </ng-container>
  </td>
</ng-container>

其中：

assertItemType(item: ToDoInterface): ToDoInterface {
  return item;
}

有效。

但不确定这是否是最好的方法

Answer 3

尽管问题有点老了，我还是想添加一种用于实现IDE类型提示的方法。

首先，我们可以添加其他方法，

  asRequest(request: any): Request{
    return workflow as Workflow;
  }

因此，现在您可以使用该方法包装 request。

<mat-cell *matCellDef="let request">
     <a [href]="asRequest(request).url" target="_blank">{{asRequest(request).requestId}}</a>
</mat-cell>

所以 just request现在是asRequest(request)。（您可以认为它具有强制转换功能。实际上是！）

我知道这种方式可以进行一些额外的函数调用，但是它将满足您的需要。

Answer 4

现在，我终于理解了这个问题（在OP编辑后）。

在声明*matCellDef="let request"时不能在模板中指定类型，但是，局部变量应该已经在组件中输入。

使用AM表时，我们会出现类似这样的内容，对吧？

<mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
</mat-table>

我们不能键入 user局部变量，但是我们可以键入 dataSource。

所以，想象一下我们有这个界面：

export interface User {
    name: string;
    email: string;
}

我们的dataSource是用户的集合。然后，我们将这样输入：

dataSource: User[] = this.getUsers();

现在，我们告诉编译器 dataSource的每个元素的类型为User 。

有没有办法在Typescript和Angular中为“ let variable”类型键入IDE提示？

4 个答案: