首先将>表达式转换为'unknown'，同时扩展 FormGroup

Question

从Angular 14:中的FormGroup派生的自定义类

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;
}

添加了一个新属性：isSaving

创建该表单的方法：

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>;
};

组件中的用途：

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

我在遇到一个构建错误

将tt作为MyForm返回；

在导出constcreateMyForm代码中：

类型'FormGroup<｛[K in keyof｛[key in keyof T]：[formState:T[key]，validatorOrOpts？：ValidatorFn|FormControlOptions|ValidatorFn[]| null |未定义，asyncValidator？：异步验证器Fn|AsyncValidatorFn[]| null | undefined]；｝]：ɵ元素<gt；；｝>'到类型"MyForm"可能是一个错误，因为两个类型都不够彼此重叠。如果这是故意的，请将表达式转换为"unknown"。类型中缺少属性"isSaving"'FormGroup<｛[K in keyof｛[key in keyof T]：[formState:T[key]，验证器或选项？：ValidatorFn|FormControlOptions|ValidatorFn[]|null |未定义，asyncValidator？：异步验证器Fn|AsyncValidatorFn[]| null | undefined]；｝]：ɵ元素<gt；；｝>'但是类型"MyForm"中需要。ts

您能分享如何扩展FormGroup并为其添加自定义属性吗？

Answer 1

isSaving不是FormGroup的成员，将isSaving标记为可选成员将解决错误

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;
}