How to get typescript compilation error on signal variable from ngrx selectSignal function?

I am using ngrx selectSignal() to select a state slice of my ngrx store. It returns a Signal of my object instead of an Observable. So far so good.

But there is no typescript errors, if I try to assign a value to this signal object. I only get an error in runtime, which is often too late, if I don't catch the error myself in local development runtime.

example:

// defining and setting the signal variable
public voucherFilterSignal: Signal<VoucherFilter> =
this._store.selectSignal(selectVoucherFilter);

...


// assigning a new value to the signal (i expect my editor to give me a typescript error here, but all is fine - but it will break in runtime)
this.voucherFilterSignal().search = 'someNewValue';


I seem to have kinda workaround to add Readonly type when declaring the variable, so typescript compiler catches it in the editor. I'm still confused why this is not the default, as the runtime catches it.

public voucherFilterSignal: Signal<Readonly<VoucherFilter>> =
this._store.selectSignal(selectVoucherFilter);

...

this.voucherFilterSignal().search = 'someNewValue'; // now correctly gives typescript error "Cannot assign to 'search' because it is a read-only property.ts(2540)"

Continue reading...