Tiefen-unveränderliche Tupel-Typumwandlung für Angular Signal-Selektoren

export type DeepReadonly<T> = T extends (...args: any[]) => any
  ? T
  : T extends ReadonlyArray<infer U>
  ? ReadonlyArray<DeepReadonly<U>>
  : T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;
 
import { Component, signal, computed } from '@angular/core';
 
interface AppState {
  userPermissions: [string, ...string[]];
  metadata: { config: { activeTheme: string } };
}
 
@Component({
  selector: 'app-state-viewer',
  standalone: true,
  template: `<div>Theme: {{ readonlyState().metadata.config.activeTheme }}</div>`
})
export class StateViewerComponent {
  private rawState = signal<AppState>({
    userPermissions: ['READ', 'WRITE', 'EXECUTE'],
    metadata: { config: { activeTheme: 'dark' } }
  });
 
  readonlyState = computed<DeepReadonly<AppState>>(() => 
    Object.freeze(this.rawState()) as DeepReadonly<AppState>
  );
 
  attemptMutation(): void {
    const state = this.readonlyState();
    // TS Compiler Error: Cannot assign to 'activeTheme' because it is a read-only property
    // state.metadata.config.activeTheme = 'light';
  }
}