Angular: ドメインロジックをシグナル化する（カウンター編）

DRANK

これはAngularアドベントカレンダー 3日目の記事です。昨日はaerealさんでした。 { Signal, signal } from '@angular/core'; export type CounterSignal = Signal<number> & { increment: () => void; decrement: () => void; reset: () => void; asReadonly: () => Signal<number>; }; export function counterSignal(initialValue = 0): CounterSignal { const counter = signal(initialValue); return Object.assign(counter.asReadonly(), { increment: () => counter.update((v) => v + 1), decrement: () => counter.update((v) => v - 1), reset: () => counter.set(initialValue), asReadonly: () => counter.asReadonly(), }); } CounterSignalはシグナルとして読み取り用のインターフェースを備えつつ、書き込みについては専用のメソッドだけが公開されており、通常のWritableSignalにあるset()やupdate()は持っていません。これにより、カウンターとしてのルールに従った方法でのみ値が更新されうるシグナルオブジェクトを作ることができます。asReadonly()は書き込み操作を不能にするためのお作法です。実際に使うとこんな感じで…