使用TypeScript和Angular2驗證傳入數據的類型

Question

我想知道推薦的方式來驗證通過AJAX從服務器接收的數據或在Angular2 +應用程序中通過@input修飾器從子組件中接收的數據。在應用程序，我目前的工作與我使用的接口，這一點，但他們不驗證輸入的數據，即某些屬性缺失時，發出有關無效型沒有運行時錯誤：

// types.ts 
export interface IAuthItem { 
name: string; 
type: number; 
description: string; 
rule_name: string | any; 
data?: any; 
created_at: number; 
updated_at: number; 
selected?: boolean; 
} 

export interface IAuthItemFormModel { 
AuthItem: IAuthItem; 
oldAuthItem: IAuthItem; 
permissions: IAuthItem[]; 
assignments: IAuthItem[]; 
} 

// component.ts 

//other imports 
import { IAuthItemFormModel, IAuthItem } from './types.ts'; 

.... 

@Input() model: IAuthItemFormModel; 

    ngOnInit() { 
    this.getData(); 
} 

getData() { 
    this.http.post('/api/admin/auth-item/form-data', 
    this.model).subscribe((data: IAuthItemFormModel) => { 
    this.model = Object.assign(this.model, data); 
    console.log(this.model); 
    }); 
} 

Answer 1

免責聲明：這是純粹的一種可能的方法的例子，這並不意味着它需要有效或無論如何，這只是我最近使用的方法，並允許彈性，這正是我所尋找的。

現在，到了這一點。因爲接口在運行時並不存在，所以如果你想解析並有效地添加任何種類的「測試」來獲取所需的數據並最終轉換所獲取的數據，那麼應該使用類。

這裏是一個小例子，模擬這樣的響應：

const json_response = { 
    status: "done", 
    refere: { 
     "id": 13, 
     "name": "John" 
    } 
}; 

在我們的情況下，我會申請是有一個響應處理器，是以整個反應的護理邏輯和Referee類也處理參考參考。

從裁判開始：

interface IReferee { 
    id: number, 
    name: string 
} 

class Referee implements IReferee { 
    public id: number; 
    public name: string; 

    private rawData: any; 

    constructor(data?: any) { 
     if (data !== null) { 
      // Do some check here to check whether data is effectively coherent. 
      this.id = +data.id; 
      this.name = data.name; 
     } 
    } 

    // This is the advantage of using a class. 
    // Adding optional methods that may be useful here and there. 
    get ID(): number { 
     return this.id; 
    } 

    get LowerCaseName(): string { 
     return this.name.toLowerCase(); 
    } 

    get Name(): string { 
     return this.name; 
    } 

    get UpperCaseName(): string { 
     return this.name.toUpperCase(); 
    } 
} 

的接口不是強制性的，它只是有用的，以確保您在類中正確地執行了一切。這裏的優點是你可以實現你自己的方法（如上所示）。

響應處理程序：

interface IMyJsonResponseHandler { 
    status: string, 
    refere: Referee 
} 

class MyJsonResponseHandler implements IMyJsonResponseHandler { 
    private rawData: any; 

    public status: string; 
    public refere: Referee; 

    constructor(data?: any) { 
     if (data !== null) { 
      this.status = data.status; 
      this.refere = new Referee(data.refere); 
     } 
    } 

    get Refere(): Referee { 
     return this.refere; 
    } 
} 

而且相同的標準應用於：基本上，這裏所提供的參數是JSON響應。每一次處理都是在構造函數中完成的，如果你想添加任何嚴格的檢查，那麼在那裏執行並最終拋出錯誤或你需要的任何東西。通過這種方式，您可以訪問幾乎所有的json響應，並且可以通過接口和類一起享受intellisense。當然，你可以簡單地接受JSON響應是無類型的，但是如果你需要做一些嚴格的檢查並且需要這些數據用於其他計算，或者只是想更容易理解屬性是什麼，那麼你必須使用類並做因爲在這種情況下，打字稿中的界面不過是開發者的一種安慰。

實例：

const json_response = { 
    status: "done", 
    refere: { 
     "id": 13, 
     "name": "John" 
    } 
}; 
let res = new MyJsonResponseHandler(json_response); 

console.log(res.Refere.LowerCaseName); 

Playground with this example 哪些日誌：john。

該標準的優點：智能感知。您可以輕鬆實現一個接口，但是如果您需要複雜的數據闡述（或者更簡單，如果您需要將內部屬性作爲類實例實例化），則必須使用其他條件。

其他來源，你應該檢查：

How to parse JSON string in Typescript

How do I cast a JSON object to a typescript class

Answer 2

接口上不存在JS和你應該認爲TS是JS的超集，但它被轉換成JS，這是瀏覽器可以理解的。

該接口只是爲您提供一些Intellisense和編譯時錯誤的開發。

話雖如此，你必須通過JS驗證該對象的唯一方法是查看參數。你有幾種方法，其中之一是getOwnPropertyNames

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames