Typescript와 Angular에서 "let variable" 유형에 대한 힌트 IDE를 입력하는 방법이 있습니까?

Typescript와 Angular에서 "let variable" 유형에 대한 힌트 IDE를 입력하는 방법이 있습니까?

마크업을 하는 것과 같은 것입니다.

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

요청 유형이 어떤 식으로든 IDE를 입력할 수 있습니까?Request저는 여기서 IntelliJ를 사용하고 있습니다.

참고로 여기서 Angular Material 테이블을 사용하고 있으므로 다음과 같이 선언합니다.requestin 구성 요소는 순수하게 템플릿 변수이기 때문에 여기서는 옵션이 아닙니다.모든 행 반복 시 구성 요소 자체에서 내부적으로 제공하는 행 데이터가 포함되어 있습니다.

이 마크업은 MatDataTable 구성 요소에서 사용되는 완벽하게 유효한 마크업입니다.

처럼

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;
}

작동하다.

하지만 그것이 그것을 하는 가장 좋은 방법인지 확신할 수 없습니다.

이 문제는 변수를 다른 변수 안에 감아서 해결할 수 있습니다.ng-template

IDE는 다음과 같은 경우 유형 어설션을 인식합니다.*ngFor또는*ngIf사용 중입니다.이것은 다른 해결책이지만 HTML에 코드 두 줄만 더 추가하기 때문에 다른 솔루션보다 훨씬 마음에 들었습니다. 물론 변수를 1~2배만 사용한다면 다른 솔루션이 더 좋습니다.내 대답:

이 대신:

<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;
}

이것을 사용하여, 이제 잘못된 속성을 컨텍스트에 추가하면 다음과 같은 컴파일 오류가 발생합니다. 여기 스택블리츠 데모가 있습니다. 이 솔루션의 단점은 내부입니다.<ng-template>이로 인해 나중에 렌더링됩니다.[ngIf].

'newFooProp' 속성이 'Foo' 유형에 없습니다.

이것은 제가 이 다른 질문에 했던 것과 같은 대답입니다.

템플릿의 기능에 주의해야 합니다.여기 제가 사용하는 맞춤 파이프가 있습니다.그것은 내 IDE(PhpStorm)에서 제정신으로 리팩터링을 계속합니다.

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'asType',
  pure: true,
})
export class AsTypePipe implements PipeTransform
{
  transform<T>(value: any, clss: new (...args: any[]) => T): T
  {
    return value as T;
  }
}

템플릿에서 다음과 같이 사용할 수 있습니다.

<ng-template let-item="someAnyType">
  <span>{{(item | asType :Customer).name}}</span>
</ng-template>

정의할 위치:

import {Customer} from 'somewhere';

public Customer: typeof Customer = Customer; //Type variable to use in templates
public customer: Customer; //Case sensitivity allows creating similar variables if needed.

질문이 조금 오래되었지만 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>

그러니 정당한 request지금은asRequest(request)(주조를 위한 기능이라고 생각하시면 됩니다.사실 그렇습니다!)

이 방법으로 추가 기능 호출을 할 수 있지만 필요한 기능을 수행할 수 있습니다.

클래스가 없고 파이프를 사용하려는 경우 다음과 같은 작업을 수행할 수 있습니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'asType',
})
export class AsTypePipe implements PipeTransform {
  transform<T>(value: unknown, type: T): T {
    return value as typeof type;
  }
}

구성 요소의 데이터를 사용합니다.

 @Input() nodes: IModelNode[] = [];

그리고 그것을 사용합니다.

[attr.width]="(node | asType : nodes[0]).dimension?.width"

이제 (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();

이제 우리는 컴파일러에게 의 각 요소가 유형이라고 말하고 있습니다.

언급URL : https://stackoverflow.com/questions/51279454/is-there-a-way-to-typehint-ide-for-let-variable-type-in-typescript-and-angular