angular - konvertera > uttrycket till 'unknown' först när du utökar FormGroup

En anpassad klass härledd från FormGroup i Angular 14:

export interface MyForm<T> extends FormGroup {
  isSaving: boolean;
  value: Required<T>;
  controls: { [key in keyof Required<T>]: FormControl<T> };
  setValue(
    value: Required<T>,
    options?: {
      onlySelf?: boolean;
      emitEvent?: boolean;
    }
  ): void;
  reset(
    value: T,
    options?: {
      onlySelf?: boolean;
      emitEvent?: boolean;
    }
  ): void;
}

En ny egenskap tillagd: isSaving

Metod för att skapa det formuläret:

export const createMyForm = <T>({
  fb,
  controls,
  options
}: {
  fb: FormBuilder;

  controls: {
    [key in keyof T]: [
      formState: T[key],
      validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null,
      asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
    ];
  };
  options?: AbstractControlOptions | null;
}) => {
  // eslint-disable-next-line prefer-const

  const tt = fb.group(controls, options);
  return tt as MyForm<T>;

};

Användning i komponent:

this.myForm = createMyForm<User>({
      fb,
      controls: {
        username: ['', Validators.required],
        password: ['', Validators.required]
      },
      options: {
      }
    });

Jag får ett byggfel vid

return tt som MyForm;

i export const createMyForm kod:

Konvertering av typen 'FormGroup<{ [K in keyof { [key in keyof T]: [formState: T[key], validatorOrOpts?: ValidatorFn | FormControlOptions | ValidatorFn[] | null | undefined, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null | undefined]; }]: ɵElement<...>; }>' till typen 'MyForm' kan vara ett misstag eftersom ingen av typerna överlappar tillräckligt med den andra. Om detta var avsiktligt, konvertera uttrycket till 'unknown' först. Egenskapen 'isSaving' saknas i typen 'FormGroup<{ [K in keyof { [key in keyof T]: [formState: T[key], validatorOrOpts?: ValidatorFn | FormControlOptions | ValidatorFn[] | null | undefined, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null | undefined]; }]: ɵElement<...>; }>' men krävs i typen 'MyForm'.ts

Kan du dela hur man utökar FormGroup och lägger till en egen egenskap till den?

Svar #1

isSaving är inte en medlem av FormGroup, att markera isSaving som en valfri medlem borde lösa felet

export interface MyForm<T> extends FormGroup {
  isSaving?: boolean;
  value: Required<T>;
  controls: { [key in keyof Required<T>]: FormControl<T> };
  setValue(
    value: Required<T>,
    options?: {
      onlySelf?: boolean;
      emitEvent?: boolean;
    }
  ): void;
  reset(
    value: T,
    options?: {
      onlySelf?: boolean;
      emitEvent?: boolean;
    }
  ): void;
}