JSON의 Typescript 객체

Question

TypeScript를 사용하여 앱을 작성 중이며 객체를 검색하기 위해 API 호출을 만들고 있습니다.

export class User { 
    id : number; 
    name : string; 
    email : string; 
} 

을 그리고 내 API 내가 User 해당 JSON을 변환 할

{ 
    "id" : 3, 
    "name" : "Jonn", 
    "email" : "john@example.com" 
} 

반환 : 예를 들어, 나는 User 오브젝트과 같이 타이프가있다. 내가 할 수있는 또 다른 게시물을 읽었습니다.

let user : User = <User> myJson; 

이것은 잘 보이는 것처럼 보입니다. 내가 user.name 같은 사용자의 속성에 액세스 할 수 있지만 내 문제는 User 클래스가 구현하는 클래스는 속성을 사용할 수없는 경우입니다. 이런

getUppercaseName() : string { 
    return this.name.toUppercase(); 
} 

: 다음 User 클래스 안에 내가이있는 경우 예를 들어, user.name 반환 John하지만 user.getUppercaseName() 반환 undefined

을 무슨 일이야? 해결 방법이

당신이이 정확히 같은 작동으로, 인터페이스로 클래스를 치료하고있는 무엇

Answer 1

:

export interface User { 
    id : number; 
    name : string; 
    email : string; 
} 

컴파일러는 클래스 이런 식으로 is because 사용에 대한 불평하지 않는 이유 :

TypeScript의 핵심 원리 중 하나는 값 확인 모양이 에 초점을 맞추고 있다는 것입니다. 내가 만족 객체를 전달 logUser에 두 통화에서

class User { 
    id: number; 
    name: string; 
    email: string; 

    constructor(id: number, name: string, email: string) { 
     this.id = id; 
     this.name = name; 
     this.email = email; 
    } 
} 

function logUser(user: User) { 
    console.log(`user id: ${ user.id }, name: ${ user.name }, email: ${ user.email }`); 
} 

logUser({ 
    id: 1, 
    name: "user 1", 
    email: "mailaddress" 
}); 

logUser(new User(2, "user 2", "anotheraddress")); 

이 때때로 "오리 입력"또는 "구조 하위 유형"

(read more about duck typing)의 예와

또는라고 User 클래스의 인터페이스

당신은 당신이 뭔가해야 다음을 만족하는 대신 객체의 클래스의 인스턴스를 원한다면 : 내 예처럼 생성자를

new User(myJson.id, myJson.name, myJson.email); 

을 그리고, 또는 :

interface IUser { 
    id: number; 
    name: string; 
    email: string; 
} 

class User implements IUser { 
    id: number; 
    name: string; 
    email: string; 

    constructor(data: IUser) { 
     this.id = data.id; 
     this.name = data.name; 
     this.email = data.email; 
    } 
} 

... 
new User(myJson); 

을

Answer 2

Nitzan 거의이 뒤에 이론을 설명, 그래서 난 그냥 다른 접근 방식 제공합니다 :

interface UserInfo { 
    id: number; 
    name: string; 
    email: string; 
} 

class User { 
    userInfo: UserInfo; 
    constructor(userInfo: UserInfo) { 
     this.userInfo = userInfo; 
    } 
    getUpperCaseName(): string { 
     return this.userInfo.name.toLocaleUpperCase(); 
    } 
} 

const json = { 
    id: 3, 
    name: "Jonn", 
    email: "john@example.com" 
} 

let user: User = new User(json); 

Answer 3

사용자의 속성이 50 개 이상인 경우 문제가 발생합니다 ...

사용자 개체에 생성자를 추가하여 json 개체를 확장합니다.당신의 아약스 콜백에서

export class User { 
    constructor(jsonUser: any) 
    { 
     $.extend(this, jsonUser); 
    } 
    id : number; 
    name : string; 
    email : string; 
    getUpperCaseName() {...} 
} 

, 당신의 JSON 객체에서 사용자 개체를 만듭니다

let receivedUser = new User(jsonUser); 
let userName = receivedUser.getUpperCaseName(); 

는 그 post에서 솔루션을 설명.