Angular 2 FormBuilder类型

时间:2016-12-20 23:47:52

标签: angular typescript angular2-formbuilder

学习Angular 2,我第一次看到ngModel,现在看到了FormGroup / FormBuilder,它可以更好地制作复杂的表格。但我注意到使用FormBuilder,我们失去了TypeScript给出的所有静态类型功能。

所有可观察对象和主要对象都是任意类型。有没有什么可以避免的?

与此相关,我看到TypeScript 2.1有“映射类型”,在我看来,在不丢失属性类型的情况下转换标准接口在可观察对象中是一件好事,但是我看到没人在谈论这个角。

1 个答案:

答案 0 :(得分:3)

角度形式有两种类型

  1. 模板驱动
    1. 反应形式(使用FormGroup / FormBuilder)。
    2. 据我所知,由于自定义验证选项,反应形式很好,可以创建动态表单。这两个特征使得反应形式更加强大。

      反应形式链接Angular2 reactive form confirm equality of values

      我觉得对于observables我们已经使用了类型Observable <person[]> ;

      对于每个对象,我们可以定义其接口并在组件中使用。

      但是使用映射类型我们将获得更多选项,如readonly,proxies ....

      和nodbody谈论映射类型是因为它在TypeScript 2.1中,但对于我们的角度应用程序,我们使用"typescript": "~2.0.10"来保持我们的应用程序稳定。

      映射类型

      一个常见的任务是获取现有类型并使其每个属性完全可选。让我们说我们有一个人:

      interface Person {
          name: string;
          age: number;
          location: string;
      }
      

      它的部分版本是:

      interface PartialPerson {
          name?: string;
          age?: number;
          location?: string;
      }
      

      使用Mapped类型,PartialPerson可以写为Person类型的通用转换:

      type Partial<T> = {
          [P in keyof T]?: T[P];
      };
      
      type PartialPerson = Partial<Person>;
      

      映射类型是通过获取文字类型的并集,并为新对象类型计算一组属性来生成的。他们喜欢Python中的列表推导,但不是在列表中生成新元素,而是在类型中生成新属性。

      除了Partial之外,Mapped Types还可以在类型上表达许多有用的转换:

      // Keep types the same, but make each property to be read-only.
      
          type Readonly<T> = {
              readonly [P in keyof T]: T[P];
          };
      
      // Same property names, but make the value a promise instead of a concrete one
      
          type Deferred<T> = {
              [P in keyof T]: Promise<T[P]>;
          };
      
      // Wrap proxies around properties of T
      
          type Proxify<T> = {
              [P in keyof T]: { get(): T[P]; set(v: T[P]): void }
          };