當屬性不​​匹配時，如何將JSON對象轉換爲打字稿類？

Question

例如，我有一個類：

export class SomeClass { 
id: number; 
name: string; 
} 

我收到JSON從服務器比看起來像這樣

[{"Id":1,"Name":"typicalname"},{"Id":2,"Name":"somename"},{"Id":3,"Name":"blablabla"},{"Id":4,"Name":"lol"},{"Id":5,"Name":"lil"},{"Id":6,"Name":"lal"}] 

如何蒙上了JSON對象的打字稿類時性能不匹配？ 這就是我現在這樣做的，而且它不工作。

getSomeClass() { 
    return this.http.get(this.someClassUrl) 
    .map(response => <SomeClass[]>response.json()) 
    .catch(this.handleError); 
} 

Answer 1

試試這個：

getSomeClass() { 
    return this.http.get(this.someClassUrl) 
    .map(response => { 
     let json = response.json(); 
     return json.map(m => { 
      return { 
       id: json.Id, 
       name: json.Name 
      } 
     } 
    }) 
    .catch(this.handleError); 
} 

Answer 2

當你有一個類型T和值x和你寫<T>x你是不是在執行運行時意義上的演員。你正在執行一個類型斷言。這意味着你告訴TypeScript，x的類型是T。

在這個特定的情況下，如果response.json()返回類型爲any的值，這也不是沒有道理用於反串行化操作，則<T>response.json()將由打字稿編譯器爲任何T被接受。這是因爲any類型與（技術上可分配的）所有內容兼容。

然而，在這種情況下，你要驗證的響應的形狀和編譯器不能爲你做這個。你需要編寫一個合適的驗證算法。

什麼是合適的，將取決於你的應用的領域，並且可以是不平凡的，但這裏有一個例子。不幸的是，因爲你的問題意味着Angular 2和RxJS，即使是一個簡單的適用答案也包含相當複雜的相當數量。

import {Http} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/mergeMap'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/of'; 

function injected(_) {} // emit decorator metadata with flag (not pertinent) 

@injected export class SomeService { 

    constructor(readonly http: Http) {} 

    getSomeValue(): Observable<Expected> { 
    return this.http.get(this.someResourceUrl) 
     .catch(handleError) 
     .mergeMap(response => { 
     const deserialized = response.json(); 
     if (isExpected(deserialized)) { 
      // note the type of derserialized is Expected in this block 
      return Observable.of(deserialized); 
     } 
     return Observable.throw('response data did not have the expected shape'); 
     }); 
    } 
} 

export interface Expected { 
    id: number; 
    name: string; 
} 

function isExpected(deserialized : any): deserialized is Expected { 
    return typeof deserialized.id === 'number' && typeof deserialized.name === 'string'; 
} 

function handleError(error) { // this is not really necessary, but was in the question 
    console.error(error); // log 
    return Observable.throw(error); // rethrow. 
} 

這裏最重要的是isExpected函數。

它採用任何類型的值，根據我們的標準對其進行驗證，並聲明如果它返回true，那麼給定的值確實是預期類型Expected。

是什麼意思是預期的類型？

那麼我們的isExpected函數確定並通過返回類型向TypeScript語言提供此信息，該返回類型表示如果該函數返回true，則傳遞給它的值的類型爲Expected。

這就是所謂的一個用戶定義類型保護功能，你可以在https://www.typescriptlang.org/docs/handbook/advanced-types.html閱讀更多關於它。