Plantilles de comprovació de tipus a Angular ViewEngine i Ivy

Bloc

Plantilles de comprovació de tipus a Angular ViewEngine i Ivy

Tingueu en compte què ens aportarà habilitar la comprovació de tipus de plantilla completa a Ivy.



En aquest article, aprofundiré en el sistema de comprovació de tipus Angular, mostraré com es fa a ViewEngine i també destacaré les darreres funcions i millores disponibles a Ivy.

Després de llegir aquest article:



  • esbrineu com comprova les plantilles Angular type
  • vegeu la diferència entre la comprovació de tipus ViewEngine (VE) i Ivy
  • familiaritzeu-vos amb les noves funcions de comprovació de tipus Ivy
  • tingueu més confiança amb els errors de plantilla, ja que sabreu veure el codi de comprovació de tipus generat

Comencem.

Una mica d'història. #

No recordo de quina versió Angular vam començar a produir errors estranys en la nostra producció, però hauríeu de conèixer-ne alguns:



La propietat 'resisterUser' no existeix al tipus 'LoginRegisterComponent'

el millor marc frontal de 2020

S'esperaven 0 arguments, però en tenien 1

Els paràmetres proporcionats no coincideixen amb cap signatura de la destinació de trucada

Ens mostra que Angular tracta la plantilla d’un component com un fitxer TypeScript parcial.

Però com?

Escriviu Check Block al rescat #

La resposta és senzilla.

Angular emet totes les expressions d’unió d’una manera que es pot comprovar per tipus. Per ser més precisos, Angular crea Escriviu blocs de comprovació ( TCB s) basat en la plantilla de components.

Bàsicament, un bloc de comprovació de tipus és un bloc de TypeScript

un codi que es pot incloure als fitxers font i, quan el compilador TypeScript el comprovi, ens proporcionarà informació sobre els errors de teclat de les expressions de plantilla.

Suposem que tenim un component senzill:

@Component({ selector: 'app-root', template: '{{ foo }}' }) export class AppComponent {}

A continuació s’explica el bloc de comprovació de tipus d’aquest component:

var _decl0_1: AppComponent = ((null as any)); function _View_AppComponent_1_0(): void { const currVal_0: any = _decl0_1.foo; }

Com podeu suposar, el codi anterior no es compilarà en aquest moment _decl0_1.foo des del foo la propietat no existeix a AppComponent classe.

Això és només un concepte de com funciona. Vegem com ho gestionen ViewEngine i Ivy.

#angular # desenvolupament web #ivy

indepth.dev

Plantilles de comprovació de tipus a Angular ViewEngine i Ivy

Tingueu en compte què ens aportarà habilitar la comprovació de tipus de plantilla completa a Ivy. En aquest article, aprofundiré en el sistema de comprovació de tipus Angular, mostraré com es fa a ViewEngine i també destacaré les darreres funcions i millores disponibles a Ivy. Original de Jesse Bowser [https://unsplash.com/@jessebowser?utm_source=medium&utm_medium=referral]> AngularInDepth [https://medium.com/angular-in-depth] s’allunya de Medium. Aquest article [https://indepth.dev/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular/], les seves actualitzacions i articles més recents estan allotjats a la nova plataforma inDepth.dev [https: / /indepth.dev/] En aquest article, m'endinsaré