Snippet

Unveränderliche Inputs erzwingen mit Readonly-Signal-Wrappern

Indem der erforderliche Input als ReadonlyArray<CartLine> mit einem CartLine-Interface typisiert wird, dessen Felder alle readonly sind, wird versehentliche In-Place-Mutation zu einem Kompilierfehler statt zu einem Laufzeitfehler — relevant, weil signalbasierte Change Detection Referenzen vergleicht, nicht tiefe Inhalte. Würde ein Kind versehentlich lines().push(...) auf einem gewöhnlichen Array aufrufen, würde Angular die Änderung nie erkennen, da die Array-Referenz gleich bleibt und die UI stillschweigend vom tatsächlichen Warenkorbzustand abweicht. Die Unveränderlichkeit von Array und Elementen zwingt Aufrufer dazu, bei jedem Update stets ein neues Array zu erzeugen — genau das, was computed() zur Neuberechnung veranlasst.

snippet.js

javascript

import { Component, input, computed, Signal } from '@angular/core';
 
interface CartLine {
  readonly sku: string;
  readonly qty: number;
  readonly price: number;
}
 
@Component({
  selector: 'app-cart-summary',
  standalone: true,
  template: `<p>Total: {{ total() | currency }}</p>`,
})
export class CartSummaryComponent {
  lines = input.required<ReadonlyArray<CartLine>>();
 
  protected readonly total: Signal<number> = computed(() =>
    this.lines().reduce((sum, line) => sum + line.qty * line.price, 0)
  );
 
  protected readonly isEmpty: Signal<boolean> = computed(
    () => this.lines().length === 0
  );
}

angular

Erklärung

interface CartLine { readonly sku: string; readonly qty: number; readonly price: number; }

Markiert jedes Feld als readonly, sodass TypeScript jeden Codepfad ablehnt, der eine Eigenschaft eines bestehenden Zeilenelements neu zuweist.

lines = input.required<ReadonlyArray<CartLine>>();

Typisiert das Input-Signal als schreibgeschütztes Array und blockiert mutierende Array-Methoden wie push oder splice bereits auf Typebene.

this.lines().reduce((sum, line) => sum + line.qty * line.price, 0)

computed() läuft nur erneut, wenn das lines()-Signal eine neue Array-Referenz meldet — genau das garantiert Unveränderlichkeit bei jedem echten Update.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Unveränderliche Inputs erzwingen mit Readonly-Signal-Wrappern

Verwandt