javascript / expert
Snippet
Template-Literal-Typen-Einschränkungen für Angular Komponenten String-Literal-Datentypen
TypeScript Template-Literal-Typen erlauben die Erstellung strikter String-Literal-Union-Datentypen auf Basis grundlegender Parameter (`ds-${ColorVariant}-${ComponentSize}`). In Angular Komponenten-Inputs erzwingt dies zur Kompilierzeit die Einhaltung von Design-Tokens.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
type ColorVariant = 'primary' | 'secondary' | 'accent';type ComponentSize = 'sm' | 'md' | 'lg';type DesignSystemToken = `ds-${ColorVariant}-${ComponentSize}`;import { Component, Input, booleanAttribute } from '@angular/core';@Component({selector: 'app-badge',standalone: true,template: `<span [class]="tokenClass">{{ label }}</span>`})export class BadgeComponent {@Input({ required: true }) label!: string;@Input({ required: true }) token!: DesignSystemToken;@Input({ transform: booleanAttribute }) disabled = false;get tokenClass(): string {return `badge-variant-${this.token}`;}static isValidToken(val: string): val is DesignSystemToken {return /^ds-(primary|secondary|accent)-(sm|md|lg)$/.test(val);}}
angular
Erklärung
1
type DesignSystemToken = `ds-${ColorVariant}-${ComponentSize}`;
Konstruiert einen dynamischen String-Literal-Datentyp für alle 9 gültigen Design-Token-Kombinationen.
2
@Input({ required: true }) token!: DesignSystemToken;
Deklariert ein Angular Komponenten-Input, das streng auf zugelassene DesignSystemToken-String-Formate beschränkt ist.
3
@Input({ transform: booleanAttribute }) disabled = false;
Nutzt Angulars meingebaute Input-Transformations-Hilfsfunktion für das Parsen von Boolean-Attributen.
4
static isValidToken(val: string): val is DesignSystemToken {
Stellt einen benutzerdefinierten Type-Guard bereit, der Strings per Regex auf den Literal-Typ verifiziert.