fix: fix type errors on TypeScript 4.8+

src/actions.ts

@@ -246,7 +246,7 @@ export type Actions<TValue> =
   | UnfocusAction
   | MarkAsSubmittedAction
   | MarkAsUnsubmittedAction
-  | AddGroupControlAction<TValue>
+  | (TValue extends KeyValue ? AddGroupControlAction<TValue> : never)
   | RemoveGroupControlAction<TValue>
   | AddArrayControlAction<any>
   | RemoveArrayControlAction

src/array/reducer/move-control.ts

@@ -51,7 +51,7 @@ export function moveControlReducer<TValue>(
 
   let controls = move(state.controls, fromIndex, toIndex);
 
-  controls = controls.map((c, i) => updateIdRecursive(c, `${state.id}.${i}`));
+  controls = controls.map((c, i) => updateIdRecursive<any>(c, `${state.id}.${i}`));
 
   return computeArrayState(
     state.id,

src/array/reducer/swap-control.ts

@@ -36,7 +36,7 @@ export function swapControlReducer<TValue>(
   }
 
   let controls = swapArrayValues(state.controls, fromIndex, toIndex);
-  controls = controls.map((c, i) => (i >= fromIndex || i >= toIndex) ? updateIdRecursive(c, `${state.id}.${i}`) : c);
+  controls = controls.map((c, i) => (i >= fromIndex || i >= toIndex) ? updateIdRecursive<any>(c, `${state.id}.${i}`) : c);
 
   return computeArrayState(
     state.id,

src/boxing.ts

@@ -32,7 +32,7 @@ export function box<T>(value: T): Boxed<T> {
 }
 
 export function unbox<T>(value: T): Unboxed<T> {
-  if (['string', 'boolean', 'number', 'undefined'].indexOf(typeof value) >= 0 || value === null) {
+  if (['string', 'boolean', 'number', 'undefined'].indexOf(typeof value) >= 0 || value === null || value === undefined) {
     return value as unknown as Unboxed<T>;
   }
 

src/group/directive.ts

@@ -2,7 +2,7 @@ import { Directive, HostListener, Inject, Input, OnInit, Optional } from '@angul
 import { ActionsSubject } from '@ngrx/store';
 
 import { Actions, MarkAsSubmittedAction } from '../actions';
-import { FormGroupState } from '../state';
+import { FormGroupState, KeyValue } from '../state';
 
 // this interface just exists to prevent a direct reference to
 // `Event` in our code, which otherwise causes issues in NativeScript
@@ -13,7 +13,7 @@ interface CustomEvent extends Event { }
   // tslint:disable-next-line:directive-selector
   selector: 'form:not([ngrxFormsAction])[ngrxFormState]',
 })
-export class NgrxFormDirective<TStateValue> implements OnInit {
+export class NgrxFormDirective<TStateValue extends KeyValue> implements OnInit {
   // tslint:disable-next-line:no-input-rename
   @Input('ngrxFormState') state: FormGroupState<TStateValue>;
 

src/group/local-state-directive.ts

@@ -1,13 +1,14 @@
 import { Directive, EventEmitter, Output } from '@angular/core';
 
 import { Actions } from '../actions';
+import { KeyValue } from '../state';
 import { NgrxFormDirective } from './directive';
 
 @Directive({
   // tslint:disable-next-line:directive-selector
   selector: 'form[ngrxFormState][ngrxFormsAction]',
 })
-export class NgrxLocalFormDirective<TStateValue> extends NgrxFormDirective<TStateValue> {
+export class NgrxLocalFormDirective<TStateValue extends KeyValue> extends NgrxFormDirective<TStateValue> {
 
   @Output() ngrxFormsAction = new EventEmitter<Actions<TStateValue>>();
 

src/group/reducer/add-control.ts

@@ -15,11 +15,11 @@ export function addControlReducer<TValue extends KeyValue>(
   }
 
   if (state.controls.hasOwnProperty(action.name)) {
-    throw new Error(`Group '${state.id}' already has child control '${action.name}'!`); // `;
+    throw new Error(`Group '${state.id}' already has child control '${action.name as string}'!`); // `;
   }
 
   const controls = Object.assign({}, state.controls, {
-    [action.name]: createChildState(`${state.id}.${action.name}`, action.value),
+    [action.name]: createChildState(`${state.id}.${action.name as string}`, action.value),
   });
 
   return computeGroupState(

src/group/reducer/remove-control.ts

@@ -15,7 +15,7 @@ export function removeControlReducer<TValue extends KeyValue>(
   }
 
   if (!state.controls.hasOwnProperty(action.name)) {
-    throw new Error(`Group '${state.id}' does not have child control '${action.name}'!`); // `;
+    throw new Error(`Group '${state.id}' does not have child control '${action.name as string}'!`); // `;
   }
 
   const controls = Object.assign({}, state.controls);

src/group/reducer/set-value.ts

@@ -1,6 +1,6 @@
 import { Actions, SetValueAction } from '../../actions';
 import { formStateReducer } from '../../reducer';
-import { computeGroupState, createChildState, FormGroupControls, FormGroupState, KeyValue } from '../../state';
+import { AbstractControlState, computeGroupState, createChildState, FormGroupControls, FormGroupState, KeyValue } from '../../state';
 import { childReducer } from './util';
 
 export function setValueReducer<TValue extends KeyValue>(
@@ -31,7 +31,7 @@ export function setValueReducer<TValue extends KeyValue>(
       if (!state.controls[key]) {
         Object.assign(c, { [key]: createChildState<TValue[string]>(`${state.id}.${key}`, value[key]) });
       } else {
-        Object.assign(c, { [key]: formStateReducer(state.controls[key], new SetValueAction(state.controls[key].id, value[key])) });
+        Object.assign(c, { [key]: formStateReducer(state.controls[key], new SetValueAction((state.controls[key] as AbstractControlState<unknown>).id, value[key])) });
       }
       return c;
     }, {} as FormGroupControls<TValue>);

src/group/reducer/util.ts

@@ -1,6 +1,6 @@
 import { Actions } from '../../actions';
 import { formStateReducer } from '../../reducer';
-import { computeGroupState, FormGroupControls, FormGroupState, FormState, KeyValue } from '../../state';
+import { AbstractControlState, computeGroupState, FormGroupControls, FormGroupState, FormState, KeyValue } from '../../state';
 
 export function dispatchActionPerChild<TValue extends KeyValue>(
   controls: FormGroupControls<TValue>,
@@ -9,7 +9,7 @@ export function dispatchActionPerChild<TValue extends KeyValue>(
   let hasChanged = false;
   const newControls = Object.keys(controls)
     .reduce((c, key) => {
-      Object.assign(c, { [key]: formStateReducer(controls[key], actionCreator(controls[key].id)) });
+      Object.assign(c, { [key]: formStateReducer(controls[key], actionCreator((controls[key] as AbstractControlState<unknown>).id)) });
       hasChanged = hasChanged || c[key] !== controls[key];
       return c;
     }, {} as FormGroupControls<TValue>);

src/reducer.ts

@@ -4,7 +4,7 @@ import { Actions, ALL_NGRX_FORMS_ACTION_TYPES } from './actions';
 import { formArrayReducer } from './array/reducer';
 import { formControlReducer } from './control/reducer';
 import { formGroupReducer } from './group/reducer';
-import { AbstractControlState, FormArrayState, FormControlState, FormState, isArrayState, isFormState, isGroupState } from './state';
+import { AbstractControlState, FormArrayState, FormControlState, FormState, isArrayState, isFormState, isGroupState, KeyValue } from './state';
 import { ProjectFn } from './update-function/util';
 
 export function formStateReducer<TValue>(
@@ -88,7 +88,7 @@ function reduceNestedFormState<TState>(state: TState, key: keyof TState, action:
   };
 }
 
-function reduceNestedFormStates<TState>(state: TState, action: Action): TState {
+function reduceNestedFormStates<TState extends KeyValue>(state: TState, action: Action): TState {
   return Object.keys(state).reduce((s, key) => reduceNestedFormState(s, key as keyof TState, action), state);
 }
 
@@ -141,7 +141,7 @@ export function onNgrxFormsAction<
  * The update function is passed the form state and the updated containing state
  * as parameters.
  */
-export function wrapReducerWithFormStateUpdate<TState, TFormState extends AbstractControlState<any>>(
+export function wrapReducerWithFormStateUpdate<TState extends KeyValue, TFormState extends AbstractControlState<any>>(
   reducer: ActionReducer<TState>,
   formStateLocator: (state: TState) => TFormState,
   updateFn: (formState: TFormState, state: TState) => TFormState,

src/state.ts

@@ -229,7 +229,7 @@ export interface FormControlState<TValue extends FormControlValueTypes> extends
 /**
  * This type represents the child control states of a form group.
  */
-export type FormGroupControls<TValue> = {
+export type FormGroupControls<TValue extends KeyValue> = {
   readonly [controlId in keyof TValue]: FormState<TValue[controlId]>;
 };
 
@@ -576,7 +576,7 @@ export type InferredFormState<T extends InferenceWrapper<any>> =
   : T extends InferenceWrapper<readonly (infer U)[] | undefined | null> ? FormArrayState<U>
 
   // group
-  : T extends InferenceWrapper<infer U | undefined | null> ? FormGroupState<U>
+  : T extends InferenceWrapper<infer U | undefined | null> ? U extends KeyValue ? FormGroupState<U> : never
 
   // fallback type (this case should never (no pun intended) be hit)
   : never
@@ -605,7 +605,7 @@ export function isArrayState<TValue = any>(state: any): state is FormArrayState<
 /**
  * This function determines if a value is a group state.
  */
-export function isGroupState<TValue = any>(state: any): state is FormGroupState<TValue> {
+export function isGroupState<TValue extends KeyValue = any>(state: any): state is FormGroupState<TValue> {
   return isFormState(state) && state.hasOwnProperty('controls') && !Array.isArray((state as any).controls) && typeof (state as any).controls !== 'function';
 }
 
@@ -684,8 +684,9 @@ export function getFormGroupValue<TValue extends KeyValue>(
 ): TValue {
   let hasChanged = Object.keys(originalValue).length !== Object.keys(controls).length;
   const newValue = Object.keys(controls).reduce((res, key: keyof TValue) => {
-    hasChanged = hasChanged || originalValue[key] !== controls[key].value;
-    res[key] = controls[key].value;
+    const control = controls[key] as AbstractControlState<TValue[keyof TValue]>;
+    hasChanged = hasChanged || originalValue[key] !== control.value;
+    res[key] = control.value;
     return res;
   }, {} as TValue);
 
@@ -703,10 +704,11 @@ export function getFormGroupErrors<TValue extends KeyValue>(
       .reduce((res, key) => Object.assign(res, { [key]: originalErrors[key] }), {} as ValidationErrors);
 
   const newErrors = Object.keys(controls).reduce((res, key: any) => {
-    const controlErrors = controls[key].errors;
+    const control = controls[key] as AbstractControlState<TValue[keyof TValue]>;
+    const controlErrors = control.errors;
     if (!isEmpty(controlErrors)) {
       hasChanged = hasChanged || originalErrors[`_${key}`] !== controlErrors;
-      Object.assign(res, { [`_${key}`]: controls[key].errors });
+      Object.assign(res, { [`_${key}`]: control.errors });
     } else {
       hasChanged = hasChanged || originalErrors.hasOwnProperty(`_${key}`);
     }
@@ -736,11 +738,11 @@ export function computeGroupState<TValue extends KeyValue>(
   value = getFormGroupValue<TValue>(controls, value);
   errors = getFormGroupErrors(controls, errors);
   const isValid = isEmpty(errors);
-  const isDirty = flags.wasOrShouldBeDirty || Object.keys(controls).some(key => controls[key].isDirty);
-  const isEnabled = flags.wasOrShouldBeEnabled || Object.keys(controls).some(key => controls[key].isEnabled);
-  const isTouched = flags.wasOrShouldBeTouched || Object.keys(controls).some(key => controls[key].isTouched);
-  const isSubmitted = flags.wasOrShouldBeSubmitted || Object.keys(controls).some(key => controls[key].isSubmitted);
-  const isValidationPending = pendingValidations.length > 0 || Object.keys(controls).some(key => controls[key].isValidationPending);
+  const isDirty = flags.wasOrShouldBeDirty || Object.keys(controls).some(key => (controls[key] as AbstractControlState<TValue[keyof TValue]>).isDirty);
+  const isEnabled = flags.wasOrShouldBeEnabled || Object.keys(controls).some(key => (controls[key] as AbstractControlState<TValue[keyof TValue]>).isEnabled);
+  const isTouched = flags.wasOrShouldBeTouched || Object.keys(controls).some(key => (controls[key] as AbstractControlState<TValue[keyof TValue]>).isTouched);
+  const isSubmitted = flags.wasOrShouldBeSubmitted || Object.keys(controls).some(key => (controls[key] as AbstractControlState<TValue[keyof TValue]>).isSubmitted);
+  const isValidationPending = pendingValidations.length > 0 || Object.keys(controls).some(key => (controls[key] as AbstractControlState<TValue[keyof TValue]>).isValidationPending);
   return {
     id,
     value,
@@ -774,7 +776,7 @@ export function createFormGroupState<TValue extends KeyValue>(
   initialValue: TValue,
 ): FormGroupState<TValue> {
   const controls = Object.keys(initialValue)
-    .map((key: keyof TValue) => [key, createChildState(`${id}.${key}`, initialValue[key])] as [string, FormState<any>])
+    .map((key: keyof TValue) => [key, createChildState(`${id}.${key as string}`, initialValue[key])] as [string, FormState<any>])
     .reduce((res, [controlId, state]) => Object.assign(res, { [controlId]: state }), {} as FormGroupControls<TValue>);
 
   return computeGroupState(id, controls, initialValue, {}, [], {}, { wasOrShouldBeEnabled: true });

src/update-function/disable.ts

@@ -1,5 +1,5 @@
 import { DisableAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -21,7 +21,7 @@ export function disable<TValue>(state: FormArrayState<TValue>): FormArrayState<T
  * Disabling a control will clear all of its errors (i.e. making it always valid) and
  * will remove all pending validations (thereby effectively cancelling those validations).
  */
-export function disable<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function disable<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a form state and disables it. For groups and arrays also

src/update-function/enable.ts

@@ -1,5 +1,5 @@
 import { EnableAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function enable<TValue>(state: FormArrayState<TValue>): FormArrayState<TV
 /**
  * This update function takes a form group state and enables it and all of its children.
  */
-export function enable<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function enable<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a form state and enables it. For groups and arrays also

src/update-function/mark-as-dirty.ts

@@ -1,5 +1,5 @@
 import { MarkAsDirtyAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function markAsDirty<TValue>(state: FormArrayState<TValue>): FormArraySta
 /**
  * This update function takes a form group state and marks it and all of its children as dirty.
  */
-export function markAsDirty<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function markAsDirty<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a state and marks it as dirty. For groups and arrays this also marks

src/update-function/mark-as-pristine.ts

@@ -1,5 +1,5 @@
 import { MarkAsPristineAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function markAsPristine<TValue>(state: FormArrayState<TValue>): FormArray
 /**
  * This update function takes a form group state and marks it and all of its children as pristine.
  */
-export function markAsPristine<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function markAsPristine<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a state and marks it as pristine. For groups and arrays this also marks

src/update-function/mark-as-submitted.ts

@@ -1,5 +1,5 @@
 import { MarkAsSubmittedAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function markAsSubmitted<TValue>(state: FormArrayState<TValue>): FormArra
 /**
  * This update function takes a form group state and marks it and all of its children as submitted.
  */
-export function markAsSubmitted<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function markAsSubmitted<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a state and marks it as submitted. For groups and arrays this also marks

src/update-function/mark-as-touched.ts

@@ -1,5 +1,5 @@
 import { MarkAsTouchedAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function markAsTouched<TValue>(state: FormArrayState<TValue>): FormArrayS
 /**
  * This update function takes a form group state and marks it and all of its children as touched.
  */
-export function markAsTouched<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function markAsTouched<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a state and marks it as touched. For groups and arrays this also marks

src/update-function/mark-as-unsubmitted.ts

@@ -1,5 +1,5 @@
 import { MarkAsUnsubmittedAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function markAsUnsubmitted<TValue>(state: FormArrayState<TValue>): FormAr
 /**
  * This update function takes a form group state and marks it and all of its children as unsubmitted.
  */
-export function markAsUnsubmitted<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function markAsUnsubmitted<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a state and marks it as unsubmitted. For groups and arrays this also marks

src/update-function/mark-as-untouched.ts

@@ -1,5 +1,5 @@
 import { MarkAsUntouchedAction } from '../actions';
-import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState } from '../state';
+import { AbstractControlState, FormArrayState, FormControlState, FormControlValueTypes, FormGroupState, FormState, KeyValue } from '../state';
 import { abstractControlReducer } from './util';
 
 /**
@@ -15,7 +15,7 @@ export function markAsUntouched<TValue>(state: FormArrayState<TValue>): FormArra
 /**
  * This update function takes a form group state and marks it and all of its children as untouched.
  */
-export function markAsUntouched<TValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
+export function markAsUntouched<TValue extends KeyValue>(state: FormGroupState<TValue>): FormGroupState<TValue>;
 
 /**
  * This update function takes a state and marks it as untouched. For groups and arrays this also marks