2016-09-05 1 views
0

내가 client 객체의 배열이 들어있는 백엔드에서 JSON을받을에서 :타이프 : 캐스트 유형에 가입하거나지도에

export class Client { 
    private id:number; 
    private firstname: String; 
    private lastname: String; 
    private phone:String; 
    private address:String; 
    private country:String; 
    private Security_No:String; 
} 

내가 캐스팅하는 가장 쉬운 방법을 찾고 있어요 : 여기 하면 클라이언트 클래스입니다 json에서 Clients[]으로 수신되었습니다. 현재 json을 특성에 저장하고 나중에 던지고 데이터 프레임을 추출합니다. 하지만 더 쉬운 방법이 있어야 할 것 같습니다.

populateClientData() { 
    this._httpClientService.getAllClients().subscribe((res)=>this.data=res.json())) 
} 

답변

1

당신은 (즉, JS 객체) JSON 데이터를 전송할 수 없습니다를 클래스로 .
글쎄, 할 수는 있지만 클래스의 인스턴스가 아니라 클래스 인터페이스를 만족하는 오브젝트가 있습니다.

간단한 예 :

class Point { 
    x: number; 
    y: number; 

    constructor(x: number, y: number) { 
     this.x = x; 
     this.y = y; 
    } 
} 

let a = { 
    x: 5, 
    y: 5 
} as Point; 
console.log(a); // Object {x: 5, y: 5} 

let b = new Point(5, 5); 
console.log(b); // Point {x: 5, y: 5} 

컴파일러 불평으로 약 aPoint 인터페이스를 만족하므로 이러한 유효 때문에 Point 인스턴스없는 :

function log(point: Point) { 
    console.log(`(${ point.x }, ${ point.y })`); 
} 

log(a); // fine 
log(b); // fine 

(code in playground)

작동합니다. this way because :

TypeScript의 핵심 원리 중 하나는 값 확인 모양이 에 초점을 맞추고 있다는 것입니다. 이것은 때때로 "duck typing"또는 "구조적 하위 유형 지정"이라고도합니다. TypeScript에서 이러한 유형의 이름을 지정하는 역할을 인터페이스가 채우며 프로젝트 외부의 코드로 계약서와 계약서를 정의하는 강력한 방법입니다.

More on duck typing.

는 특정 문제에 관해서는, 당신은 인터페이스로 클래스를 사용하거나 인터페이스로합니다 (두 경우 모두에서) 다음

interface Client { 
    id:number; 
    firstname: String; 
    lastname: String; 
    phone:String; 
    address:String; 
    country:String; 
    Security_No:String; 
} 

그리고 :

this._httpClientService.getAllClients().subscribe((res) => { 
    this.data = res.json() as Client[] 
})); 

그러나 경우 인터페이스를 사용하지 않고 클래스를 사용하면 속성은 공개가되어야하며 개인이 아닌 것이어야합니다.당신이 할 수 없습니다 캐스팅 다음 인터페이스 클래스로 클래스를 사용하지하고자하는 경우

, 당신은해야합니다 :

this._httpClientService.getAllClients().subscribe((res) => { 
    this.data = res.json().map(item => new Client(data)); 
})); 

그리고 당신은 받아 Client에 대한 생성자가해야합니다 인터페이스를 만들고 값을 구성원에게 할당합니다.

1

내 응용 프로그램에는 복합 개체이므로 데이터를 저장할 많은 필드와 배열이있는 사용자 개체가 있습니다. 지도 연산자, 나는 다음과 같이 그 값으로 response.json() 전송할 수 있습니다 : (가) 처리 같은 방식으로 가입

return this.http.get(this.constants.userUrl + userId, { headers: headers }) 
     .map((response: Response) => <User>response.json()) 
     .catch(this.handleError); 
    } 

: