TypeScript / Angular2에서 인터페이스 및 모델을 사용하는 경우

최근에 TypeScript를 사용하여 Angular 2에 대한 자습서를 보았지만 언제 인터페이스를 사용하고 언제 모델을 사용하여 데이터 구조를 보유하는지 확실하지 않습니다.

인터페이스 예 :

export interface IProduct {
    ProductNumber: number;
    ProductName: string;
    ProductDescription: string;
}

모형의 예 :

export class Product {
    constructor(
        public ProductNumber: number,
        public ProductName: string,
        public ProductDescription: string
    ){}
}

URL에서 JSON 데이터를로드하고 인터페이스 / 모델에 바인딩하고 싶습니다. 때로는 단일 데이터 객체를 원하고 다른 시간에는 객체를 잡고 배열하려고합니다.

어느 것을 사용해야하며 왜 그런가요?

인터페이스는 컴파일 타임에만 있습니다. 이를 통해 수신 된 예상 데이터가 특정 구조를 따르는 지 확인할 수 있습니다. 이를 위해 컨텐츠를이 인터페이스로 캐스트 할 수 있습니다.

this.http.get('...')
    .map(res => <Product[]>res.json());

다음 질문을보십시오 :

• JSON 객체를 typescript 클래스로 캐스트하는 방법
• typescript에서 json 응답에서 Date 객체를 얻는 방법

클래스와 비슷한 것을 할 수 있지만 클래스와의 주요 차이점은 런타임에 생성자 (생성자 함수)가 있으며 처리를 통해 메소드를 정의 할 수 있다는 것입니다. 그러나이 경우 객체를 사용하려면 객체를 인스턴스화해야합니다.

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });

인터페이스 A의 계약 중 하나를 설명 클래스 또는 새로운 유형을 . 순수한 Typescript 요소이므로 Javascript에 영향을 미치지 않습니다.

모델, 즉 class 는 새 객체를 생성하는 데 사용되는 실제 JS 함수입니다.

URL에서 JSON 데이터를로드하고 인터페이스 / 모델에 바인딩하고 싶습니다.

모델을 찾으십시오. 그렇지 않으면 Javascript에서 여전히 JSON입니다.

@ThierryTemplier가 서버에서 데이터를 수신하고 구성 요소간에 모델을 전송한다고 말하면서 (인텔리 센스 목록을 유지하고 디자인 타임 오류를 만들기 위해) 인터페이스를 사용하는 것이 좋지만 서버 (DTO)에 데이터를 보내는 것이 클래스를 사용하는 것이 좋습니다 모델에서 자동 매핑 DTO의 장점.

모든 연구 후에 내가 찾은 인터페이스 대신 클래스를 사용하십시오 .

왜? 클래스만으로는 클래스 플러스 인터페이스보다 코드가 적습니다. (어쨌든 데이터 모델에 클래스가 필요할 수 있습니다)

왜? 클래스는 인터페이스 역할을 할 수 있습니다 (확장 대신 구현 사용).

왜? 인터페이스 클래스는 각도 의존성 주입에서 공급자 조회 토큰 일 수 있습니다.

각도 스타일 안내서에서

기본적으로 클래스는 인터페이스가하는 모든 것을 할 수 있습니다. 따라서 인터페이스를 사용할 필요가 없습니다 .