Eingabe mit benutzerdefiniertem Typ überprüfen. Winkel

Question

Ich habe eine Komponente mit einem Eingang, der als benutzerdefinierter Typ definiert ist.

Aber anscheinend kann ich jede Art von Parameter an die Komponente Tag weitergeben. Ich werde nie irgendeine Art von Fehler/Warnung haben.

<my-component labelSize="whatever"></my-component> 

kann ich Veranstaltung eine Reihe

<my-component labelSize=12345></my-component> 

ich das Typoskript Compiler erwartet oder Winkel passieren mir auf diese Art von Fehler ein Feedback zu geben.

Ich soll den Typ aller Eingänge meiner Komponenten validieren?

Best Practices?

Dank

Answer 1

die Winkel Vorlagen sind HTML und sind in keiner Weise für die Kontrolle dieser in Typoskript angeschlossen. Und selbst in Typoskripten ist es möglich, die Typdeklaration zu umgehen, z. this.labelSize = 'whatever' as any.

Am Ende ist der Code immer noch Javascript. Und in den Vorlagen ist es genauso, als würde man von Anfang an einfaches JavaScript verwenden.

Wenn Sie wirklich Mismatches aufholen vorne wollen, einige mögliche Lösungen sind:

1. Validierung

Wie bereits angedeutet, führen Sie eine manuelle Validierung oder eine Validierung Bibliothek verwenden Einschränkungen angeben, z.B. https://validatejs.org/

Übrigens, Sie können auch eine Pipe verwenden, um die Validierung bei jedem Ihrer Werte hinzuzufügen und mehr Klarheit in Ihrem HTML zu haben.

2. Config-Objekte

Sie die Konfiguration von Komponenten erfassen kann, wo Typen sind wichtig in einem Objekt, als solche

@Input() public config: { 
    labelSize: 'small' | 'normal' | 'large'; 
} = { labelSize: 'normal' } 

und binden dann die Eingabe zu myCompConfig:

<my-component [config]="myCompConfig"></my-component> 

dann in Ihrem Controller, wo Sie es verwenden

this.myCompConfig = { labelSize: 'whatever' } // error <- type is enforced now 

3. TS für Vorlagen

können Sie TS für Vorlagen anstelle von HTML verwenden, und unterstützen sie mit irgendeiner Art Info:

Teile deine Art erste

export type LabelSize = 'small' | 'normal' | 'large' 

@Input() public labelSize: LabelSize = 'normal'; 

Meine Vorlage.ts

const labelSize: LabelSize = 'whatever' // error <- type is enforced 

export const template = ` 
    <my-component labelSize=${labelSize}></my-component>` 
`; 

dann in Ihrer Komponente direkt

import { template } from './my-template.ts'; 
@Component({ selector: 'something', template }) 

Hinweis verwenden, um dies auch für die Erstellung von Teilen der Tempel in eine Fabrik-Ansatz extrahiert werden können, beispielsweise Sie können eine Factory zum Erstellen dieses Elements basierend auf einem labelSize-Parameter erstellen (und dieser Parameter kann Typinformationen haben).