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

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

최근에 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 개체를 타이프스크립트 클래스에 캐스팅하려면 어떻게 해야 합니까?
• 타이프스크립트의 json Response에서 날짜 개체를 가져오는 방법

클래스와 유사한 작업을 수행할 수 있지만 클래스와 가장 큰 차이점은 실행 시(컨스트럭터 함수)에 존재하며 처리와 함께 메서드를 정의할 수 있다는 것입니다.그러나 이 경우 개체를 사용하려면 개체를 인스턴스화해야 합니다.

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

인터페이스는 클래스 또는 새로운 유형에 대한 계약을 설명합니다.순수 Typescript 요소이므로 Javascript에는 영향을 주지 않습니다.

모델, 즉 클래스는 새로운 객체를 생성하기 위해 사용되는 실제 JS 함수입니다.

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

모델을 선택해 주세요.그렇지 않으면 Javascript에 JSON으로 표시됩니다.

저는 개인적으로 모델을 위해 인터페이스를 사용하고 있습니다.이 질문에 관한 학교는 3곳으로 되어 있습니다.가장 많은 경우, 어느 쪽을 선택하는 것은 고객의 요건에 따라 다음 중 하나를 선택합니다.

1- 인터페이스:

interface는 TypeScript 컨텍스트 내에서만 존재하는 가상 구조입니다.TypeScript 컴파일러는 인터페이스를 형식 확인 목적으로만 사용합니다.코드가 대상 언어로 변환되면 해당 인터페이스에서 제거됩니다. JavaScript는 입력되지 않습니다.

interface User {
 id: number;
 username: string;
}
// inheritance
interface UserDetails extends User {
 birthdate: Date;
 biography?: string;  // use the '?' annotation to mark this property as optionnal
}

Mapping server response to an 서버 응답을 에 매핑합니다.interface is straight forward if you are using 를 사용하고 있는 경우는, 스트레이트입니다.HttpClient부에서HttpClientModule각 4.3.x와 위에 있는 경우.Angular 4.3.x 이상을 사용하는 경우.

getUsers() :Observable<User[]> {
 return this.http.get<User[]>(url); // no need for '.map((res: Response) => res.json())' 
}

인터페이스를 사용하는 경우:

• 최종 출력에 추가 오버헤드를 발생시키지 않고 서버 데이터에 대한 정의만 필요합니다.
• 동작이나 논리(컨스트럭터 초기화, 메서드) 없이 데이터만 전송하면 됩니다.
• 인터페이스에서 오브젝트를 인스턴스화/작성하는 일은 거의 없습니다.
  • Using simple object-literal notation간단한 객체 문자 표기법 사용let instance: FooInterface = { ... };, 당신은 그 장소에 반란을 겪고 있는 위험을 무릅쓰고 있다.온 사방에 반신반의할 위험이 있습니다.
  • 클래스(생성자 또는 초기화 로직, 검증, 개인 필드의 캡슐화...)에 의해 주어지는 제약조건은 적용되지 않습니다.기타)
• 시스템 계약/구성(글로벌 구성)을 정의해야 합니다.

2- 클래스:

A class청사진이러한 오브젝트가 상속하는 논리, 메서드 및 속성을 나타냅니다.

class User {
 id: number;
 username: string;
 constructor(id :number, username: string)  {
  this.id = id;
  this.username = username.replace(/^\s+|\s+$/g, ''); // trim whitespaces and new lines
 }
}
// inheritance
class UserDetails extends User {
 birthdate: Date;
 biography?: string;  
 constructor(id :number, username: string, birthdate:Date, biography? :string )  {
   super(id,username);
  this.birthdate = ...;
 }
}

클래스 사용 시기:

• 클래스를 인스턴스화하고 시간이 지남에 따라 인스턴스 상태를 변경할 수 있습니다.
• 클래스의 인스턴스에는 상태를 쿼리하거나 변환하기 위한 메서드가 필요합니다.
• 동작을 데이터와 보다 밀접하게 관련짓고 싶은 경우
• 인스턴스 생성에 제약을 적용합니다.
• 클래스 내에서 속성 할당만 많이 작성하는 경우 대신 유형을 사용하는 것을 고려할 수 있습니다.

2 - 유형:

조판본 types응용 프로그램 내에서 논리나 상태를 표현하지 마십시오.어떤 형식의 정보를 기술할 때는 유형을 사용하는 것이 가장 좋습니다.문자열, 배열 및 개체와 같은 단순한 구조에서 다양한 형태의 데이터를 설명할 수 있습니다.인터페이스와 마찬가지로 타입은 자바스크립트로 변환되지 않는 가상 구조일 뿐이며 컴파일러가 우리의 삶을 쉽게 만드는 데 도움이 됩니다.

type FamilySituation = 'single' | 'married' | 'divorced' | 'widow' ;...
type User = {
 id: number;
 username: string;
}
// inheritance
type UserDetails = User & {
  birthDate: Date;
  familySituation: FamilySituation ;
}

유형을 사용하는 경우:

• 그것을 간결한 함수 파라미터로서 전달한다.
• 클래스 생성자 매개 변수 설명
• API에서 들어오고 나가는 작은 개체 또는 중간 개체를 문서화합니다.
• 그들은 상태도 행동도 하지 않는다

서버로부터의 데이터 수신과 컴포넌트간의 모델 송신(인텔리센스 리스트의 보관과 디자인 타임 에러의 발생)에 대해서는, @ThierryTemplier가 말했듯이, 인터페이스를 사용하는 것은 좋지만, 서버(DTO)에 데이터를 송신하는 경우는 클래스를 사용해 모델의 자동 매핑 DTO를 활용하는 것이 좋다고 생각합니다.

응답에 항상 필요한 키가 있는지 확인하기 위해 데이터 유형만 확인하는 경우 인터페이스를 사용하십시오.단순한 데이터 유형 확인 이상의 클래스/모델을 제공합니다.게다가 인터페이스가 javascript에 존재하지 않는 것은 좋은 일입니다.즉, typescript는 항상 javascript 네이티브인 컴파일 시 언릭클래스에 인터페이스를 처리합니다.

코드를 유연하게 하기 위해 인터페이스를 사용해야 합니다.인터페이스를 만들고 클래스 컨스트럭터로 인터페이스 유형을 전달합니다.이것은 의존성 주입을 사용합니다.

이점:

1. 인터페이스의 파라미터에 변경이 있는 경우 [클래스를 변경할 필요가 없습니다.2 .테스트를 위해 클래스의 생성자에서 모의 데이터를 사용할 수 있습니다.

모든 연구 끝에 발견한 인터페이스 대신 클래스를 사용합니다.

왜요? 클래스만 class-plus-interface보다 코드 수가 적습니다.(어쨌든 데이터 모델의 클래스가 필요할 수 있습니다.)

왜? 클래스가 인터페이스로 작동할 수 있습니다(확장 대신 구현 사용).

이유는 무엇입니까? 인터페이스 클래스는 각도 종속성 주입에서 공급자 검색 토큰이 될 수 있습니다.

각도 스타일 가이드에서

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

언급URL : https://stackoverflow.com/questions/37652801/when-to-use-interface-and-model-in-typescript-angular