如何在Angular 2中使用Typescript類和接口實現“模式”以進行表單驗證？

Question

我目前正在學習TypeScript和Angular 2框架。 我已經通過一些丹Wahlin制品（讀這里和這里 ）的打字稿類和接口，並進一步看到在Github上關於數據驅動的表單和表單控件定義（一些討論1 ， 2 ，和3 ）。

舉例來說，我正在嘗試為用戶注冊使用注冊表格。 要求如下：

1. 需要一個User對象作為客戶端可觀察到的對象，並需要3個其他字段才能注冊到后端

2. 注冊是多步驟的，並且在多個模板上進行。 因此，當我有一個new User ，我認為我需要可選的運算符或為null的基礎對象（以避免在應用編譯時出現TypeScript錯誤）

3. 我想為某些字段設置選項（即，性別是“男性”還是“女性”），類似於Dan在本文的 Auto構造函數中設置IAutoOptions的方式。 我知道我可以使用ngForm，ControlGroups或FormBuilder進行設置，但我想知道是否可以使用TypeScript進行設置，以便可以使“ appState”可訪問。

我目前已經按照以下方式進行了設置：

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

在整個應用程序中都需要基本的User界面，並且擴展了BackendUser界面以在注冊期間提供三個附加字段。 我目前將所有字段設置為可選，因為當未提供某些參數時，我的應用程序將無法編譯。

1. TypeScript / ES6中的class和interface什么區別？ 我想我在這里正確使用extends （按照Wahlin的示例），但是我不確定是否應該在這里使用class或interface 。 我看到的大多數示例只是使用class 。
2. 使用正確的樣式? 可選參數在這里？ 可觀察對象在三個不同的階段獲取用戶值，並且當我沒有所有值時，TypeScript會引發錯誤。 我已經看到了一些示例，其中某些null用戶對象在啟動時啟動，后來又覆蓋了它的屬性，但是不確定這是最佳實踐還是在這種情況下該null對象想要的內容。
3. 有沒有辦法設置選項，例如＃3中引用的模式？ 這些選項是在像this.engine = options.engine;這樣的構造函數中設置的this.engine = options.engine; ，但我看不到options.engine來源。

任何建議或朝着正確方向的觀點將不勝感激！！ 謝謝！

Answer 1

我可以回答第一個問題：

• 接口提供類型的定義。
• 類定義類型的實現。

因此，例如可以同時具有Product接口和Product類。 該接口定義了特定類型所需的一組有效屬性（以及可選的方法）。 然后，一個類可以實現該接口，並提供獲取/設置值以及所有方法所需的代碼。

我所看到的一般經驗法則是，如果您想強類型化數據，但是沒有真正的方法，則只需使用接口即可。 例如，如果您的代碼管理一系列產品，則可以定義產品接口以強類型化那些產品。

如果您還有其他操作，例如根據多個產品屬性計算最低價格或計算標准折扣，則類可以實現這些操作。

（我沒有使用您的“用戶”示例來避免需要引用“用戶界面”並引起混亂。）