Vscode-ng-language-service: Protetores de tipo não são reconhecidos em elementos aninhados

Criado em 4 ago. 2020 · 3Comentários · Fonte: angular/vscode-ng-language-service

Descreva o bug

Quando o componente usa uma função que retorna um predicado de tipo (guarda de tipo), o editor exibe um erro relacionado a um campo ausente, mesmo que o campo esteja lá e o código seja compilado (Angular v8.2).

Reproduzir
Use um tipo de proteção em *ngIf . Tente usar um campo da interface que é determinado por ele em elementos aninhados.

// my-model.model.ts
type MyModel = (MyModelA | MyModelB) & { type: 'A' | 'B' };
interface MyModelA {  
  fieldA: any;
}
interface MyModelB {
  fieldB: any;
}

// foo.component.ts
public model: MyModel;
public isModelA(model): model is MyModelA {
  return model.type === 'A';
}

// foo.component.html


md5-1956e8def7f34e35cec69338ae3e15c2

Comportamento esperado

Não há erro no editor.

bug ivy

Fonte

JoannaFalkowska

👍6

Todos 3 comentários

da mesma forma, os protetores de tipo não se aplicam a contextos no serviço de linguagem (eles parecem se aplicar durante a compilação, assim como este)

export class NgLetContext<T = any> {
  // allows syntax "foo; let bar"
  $implicit: T = null!;
  // allows syntax "foo as bar"
  ngLet: T = null!;
}
@Directive({
  selector: '[ngLet]',
})
export class NgLetDirective<T> implements OnInit {
  @Input()
  set ngLet(value: T) {
    this.context.$implicit = this.context.ngLet = value;
  }

  constructor(private containerRef: ViewContainerRef, private templateRef: TemplateRef<NgLetContext>) {}
  private context = new NgLetContext<T>();

  static ngTemplateContextGuard<T>(dir: NgLetDirective<T>, ctx: unknown): ctx is NgLetContext<T> {
    return true;
  }

  ngOnInit() {
    this.containerRef.createEmbeddedView(this.templateRef, this.context);
  }
}

interface MyModel  { baz: ExampleValue }
// foo.component.ts
public model: MyModel;

<div *ngLet="model.baz as item">
   {{ item }}
</div>

No tipo de serviço de linguagem (passe o mouse sobre o vscode em item dentro de {{ }} pelo menos) é any

Ao compilar, digite corretamente ExampleValue

bbarry em 17 set. 2020

👍1

Isso é algo que será corrigido no próximo serviço de idioma nativo da Ivy (consulte https://github.com/angular/vscode-ng-language-service/issues/335#issuecomment-693545000), mas não algo que planejamos corrigir antes disso devido às limitações inerentes da implementação do serviço de linguagem atual.

ayazhafiz em 3 dez. 2020

👍1

Como Ayaz mencionou, isso foi resolvido no novo Serviço de Linguagem que foi lançado na v11.1 como um opt-in. Você pode habilitá-lo nas configurações de extensão: