typescript - Kan jag få Angular-kompilatorn att ge ett fel när en icke-existerande egenskap binds?

Överväg följande mall:

<p>Hello, {{ name }}</p>
<button (click)="doLogin()">Login</button>

tillsammans med denna TS-klass:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Varken name eller doLogin() existerar. Ändå kompileras och körs det utan fel. Först när jag försöker klicka på knappen får jag felmeddelandet doLogin är inte en funktion i webbläsarens konsol.

Jag vet att detta beteende (fel vid körning) mestadels är avsiktligt av Javascript. Ändå skulle jag vilja att så många fel som möjligt visas vid kompilering. Att använda Typescript gör det mesta av detta arbete.

Dock verkar egenskapsbindningar inte utvärderas vid kompileringstid. Enligt min mening borde Angular-kompilatorn vara kapabel till detta. Jag försökte sätta fulltemplatetypecheck till true, men det verkade inte göra susen. Testade det med ng serve, ng build och ng build --prod.

Finns det ett sätt att upptäcka icke-existerande egenskapsbindningar vid kompilering? Om inte, är detta ett avsiktligt beteende?

Jag använder Angular 5.2.0, Typescript 2.5.3 och Angular CLI 1.6.4

Svar #1

Funktionen kommer att finnas tillgänglig i Angular 6. Baserat på problemet.

Vi har en ny kompilatorinställning som kallas fullTemplateTypeCheck (se https://github.com/angular/angular/blob/master/packages/compiler-cli/src/transformers/api.ts#L99) som kommer att avslöja detta fel.

Denna inställning kommer att bli standard i Angular 6 och är starkt rekommenderad. Vi aktiverade den inte i Angular 5 för att inte bryta befintliga användare. Det vill säga, beteendet du ser här är exakt vad användarna såg i Angular 4.

Angular 6 och äldre

Du kan ANVÄNDA TS Lint för att uppnå detta. Jag har använt TS Lint med Visual Studio Code för att validera icke-existerande egenskapsbindningar och metoder.

Det hindrar dig inte från att kompilera men visar fortfarande ett fel.

TS Lint kommer att validera method,property som inte hittades i komponenten

Angular CLI kompilerar fortfarande din kod framgångsrikt.

Relaterade artiklar