如何在Angular 2中使用Typescript类和接口实现“模式”以进行表单验证？

Question

I am currently learning TypeScript and the Angular 2 framework. I have read through some of Dan Wahlin's articles ( here and here ) on TypeScript Classes and Interfaces, and have further seen some discussions on Github about data driven forms and form control definitions ( 1 , 2 , & 3 ).

As an example, I am trying to roll a registration form for user registration. The requirements are as follows:

1. Need a User object as a client observable, and 3 additional fields for registration to the backend

2. The registration is multi-step and occurs on multiple templates. As such, when a new User so I think I need optional operators or a base object that is null (to avoid TypeScript errors when app is compiling)

3. I would like to set options for some of the fields (ie gender is 'male' or 'female') similar to the way Dan sets IAutoOptions in the constructor for Auto in this article . I know I can set these with ngForm, ControlGroups, or the FormBuilder, but I would like to know if there is a way to do it with TypeScript so I can make it accessible to an "appState" observable.

I currently have those set up as this set up as follows:

 export interface User {
    gender?: string;
    seeking?: string;
    email?: string;
    username?: string;
    birth_date?: Date;
    country?: string;
    zipcode?: string;
 }

export interface BackendUser extends User {
    password?: string;
    password_confirm?: string;
    agreed?: boolean;
}

The base User interface is needed throughout the app, and BackendUser interface that is extended to provide three additional fields during registration. I currently have all of the fields set to optional because my app wouldn't compile when certain params weren't provided.

1. What is the difference between class and interface in TypeScript/ES6? I think I am using extends properly here (per Wahlin's example), but I am not sure if I should be using class or interface here. Most examples I see just use class .
2. Is it correct style to use the ? optional param here? The observable gets User values at three different stages, and TypeScript kicks out an error when I don't have all the values. I've seen examples where some sort of null user object is initiated on startup and later has it's properties overridden, but am not sure if this is best practice or what that null object would like like in this instance.
3. Is there any way to set options like the pattern referenced in #3? The options are set in a constructor like this.engine = options.engine; , but i don't see where options.engine comes from.

Any advice or a point in the right direction is greatly appreciated!! Thanks!

Answer 1

I can answer the first question:

• An interface provides the definition of a type.
• A class defines an implementation of a type.

So it is possible to have both a Product interface and a Product class, for example. The interface defines the set of valid properties (and optionally methods) that are required for a particular type. A class can then implement that interface and provide the code required to get/set values and for all methods.

The general rule of thumb I have seen is that if you want to strongly type your data, but have no real methods, then just use an interface. For example, if your code manages an array of products, then you can define a product interface to strongly type those products.

If you also have operations, such as to calculate a minimum price based on several product properties or to calculate a standard discount, then a class can implement those operations.

(I didn't use your "user" example to prevent the need to reference a "user interface" and cause confusion.)