递归打字稿类型和反应形式
Posted
技术标签:
【中文标题】递归打字稿类型和反应形式【英文标题】:Recursive Typescript Types and Reactive Form 【发布时间】:2021-06-30 03:25:44 【问题描述】:我有以下通用类型用于配置从The Best Way to build reactive sub-forms with Angular 获取的响应式表单:
export type FormGroupConfig<T> =
[P in keyof T]: [
T[P] | value: T[P]; disabled: boolean ,
(AbstractControlOptions | ValidatorFn | ValidatorFn[])?,
]
因此,该类型采用 Typescript 模型并将属性/键强制作为表单控件的名称。它适用于非嵌套模型类型(单个 FormGroup),例如在下面的 IAddress 类型中......
IAddress
street: string
zip: string
但是,嵌套类型失败(FormGroup 和嵌套 FormGroup)
type Nok
relation: string
address: IAddress
在上面,IAddress 将表示嵌套的 FormGroup 反应形式
如何向 FormGroupConfig 添加递归以允许考虑嵌套?
尝试了一些变体,但现在可以用了。
编辑 1:
将返回的 FormGroup 分配给嵌套属性时,解决方案会中断,如下所示:
const config: FormGroupConfig<Nok> =
relation:['', []]
address: this.addressForm.createGroup()
似乎对地址属性的分配需要进一步的工作。
【问题讨论】:
仅供参考,它已经存在。您可以尝试谷歌“键入反应形式的角度”。我现在不记得库名了。 【参考方案1】:也许这种泛型类型可能有用
type NewType<T> = [
T | value: T; disabled: boolean ,
(AbstractControlOptions | ValidatorFn | ValidatorFn[])?,
]
export type FormGroupConfig<T> =
[P in keyof T]:
T[P] extends object
? FormGroupConfig<T[P]>
: NewType<T[P]>;
Playground
【讨论】:
请参阅上述问题中的 EDIT 1(页面底部)以上是关于递归打字稿类型和反应形式的主要内容,如果未能解决你的问题,请参考以下文章
使用反应成帧器类型'()=> void'的打字稿错误不可分配给类型'未定义'