Generic type parameter issue when defining an abstract class (circular dependency)

I'm having the following issue with an abstract class having generic types which involve FormGroup:

@Directive()
export abstract class BulkAddEnterRecords<
TFormGroup extends { [K in keyof TFormGroup]: AbstractControl<any, any> },
TRecordFormGroup extends { [K in keyof TRecordFormGroup]: AbstractControl<any, any> },
TRowData extends { formGroup: FormGroup<TRecordFormGroup> },
> {
abstract formGroup: FormGroup<TFormGroup>;
// More code to follow
}


An example of TFormGroup can be SetValuesFormGroup (see below):

export interface SetValuesFormGroup {
[FieldEnum.IS_FIXED_TAGS]: FormControl<boolean>;
[FieldEnum.IS_FIXED_ORGANISATION]: FormControl<boolean>;
[FieldEnum.IS_FIXED_LOCATION_TYPES]: FormControl<boolean>;
[FieldEnum.IS_FIXED_COUNTRY]: FormControl<boolean>;
}


Getting the following error upon running ng-lint-staged lint:

error Parsing error: '?' expected

After doing some research, I realized it's caused by the circular dependency on the generic type parameters.

So, in TFormGroup extends { [K in keyof TFormGroup]: AbstractControl<any> } we're using TFormGroup to define itself.

If I remove extends { [K in keyof TFormGroup]: AbstractControl<any> }, the error Parsing error: '?' expected goes away (for that line), but I get an error in abstract formGroup: FormGroup<TFormGroup>;:

Type 'TFormGroup' does not satisfy the constraint '{ [K in keyof TFormGroup]: AbstractControl<any, any>; }'.

How can I solve this?

For reference, FormGroup is defined as:

export declare class FormGroup<TControl extends {
[K in keyof TControl]: AbstractControl<any>;
} = any> extends AbstractControl<ɵTypedOrUntyped<TControl, ɵFormGroupValue<TControl>, any>, ɵTypedOrUntyped<TControl, ɵFormGroupRawValue<TControl>, any>>


so it basically does the same I'm trying to do.

Continue reading...