Angular/Typescript - 예제의 인터페이스 이점 설명

Question

서문을하기 위해 저는 Javascript에 매우 익숙하며 Typescript를 사용하여 프로젝트에서 구현할 때까지 Angular를 잘 수행했습니다. Angular의 학습 곡선을 여전히 등반하고 TS로이 새로운 구현 방식을 보는 사이에, 그것은 나를 압도 당했다.

AngularJS의 저수준 학습을 일시 중지하고 현재 사용중인 기술인 Angular를 사용한 자습서를 시작했습니다. Typescript 및 WebApi를 사용하는 Entity Framework를 지원합니다.

나는 예를 건너 왔어요 : https://blogs.msdn.microsoft.com/tess/2015/12/10/3b-services-getting-started-with-angularjs-typescript-and-asp-net-web-api/ 내 실제 질문에 대한

, 내가가 잘하고 있던 저자가 자신의 서비스를 구현하기 시작할 때까지. 나는 (내가 공부하고 이전에 배운 것을 사용) 그것에 대해 갈 것이라고하는 방법을 생각하고 저자는 서비스 자체 설명하는 인터페이스를 사용하여 나를 때리는 :

DataAccessService

1. 만들기를 DataAccessService

module app.common.services { 
    interface IDataAccessService { 
     getStoreResource(): ng.resource.IResourceClass<IStoreResource>; 
    } 
} 

를 설명하는 인터페이스를 추가 응용 프로그램/일반/서비스

아래에 새 DataAccessService.ts 파일을 만듭니다

자, 내 관점에서 그는 자신이 원하는 리소스를 얻기 위해 호출되는 함수를 만들었지 만 구현 (특히 인터페이스 (IDataAccessService))의 이점은 무엇입니까? 그리고는 토끼 구멍 아래로 깊은 가고 다른 인터페이스의 자원 (IStores)을 반환하는 다른 인터페이스 (IStoreResource)을 생성 :

DataAccessService 그냥 우리에게 우리가 사용 할 수있는 다양한 API에의 액세스를 제공합니다에서 이 경우 상점 API 용 자원입니다. 광고 또는 제품 또는 유사품을 얻으려는 API가있는 경우 에는 예를 들어 getAdResource() 또는 getProductResource()에 대한 메소드도 있습니다. 에 ng.resource.IResourceClass를 반환하면 이 무엇인지 정의 할 수 있습니다.

IStoreResource를 IStores의 리소스로 선언하십시오 ... 리소스에서 어떤 유형의 항목이 반환되거나 전달되는지 설명하려면 입니다. 이

interface IStoreResource extends ng.resource.IResource<app.domain.IStore> { } 

예쁜이 시점에서 손실 IDataAccessService의 인터페이스 선언 위에 이동해야하지만, 계속 :

다음으로 우리가 IDataAccessService 인터페이스 아래 DataAccessService을 구현하는거야

export class DataAccessService implements IDataAccessService { 
    //minification protection 
    static $inject = ["$resource"] 
    constructor(private $resource: ng.resource.IResourceService) { } 

    getStoreResource(): ng.resource.IResourceClass<IStoreResource> { 
     return this.$resource("/api/stores/:id"); 
    } 
} 

나는 실제 작업을하는 것처럼 보이기 때문에 조금 더 잘 따라한다. 우리는 우리가 필요로하는 데이터를 반환하기 위해 리소스 API를 얻을 수있는 함수를 가지고 있습니다. 그러나 이러한 핸드 오프와 구현은 복잡성이 더해져 이익을 볼 수 없다는 것이 내 OOP 지식이 부족한 나에게 보인다.

누군가 ELI5 이상의 평신도의 접근 방식으로 이것을 설명 할 수 있습니까? 감사!

Answer 1

이것은 실제로 TypeScript가 빛나는 곳이며 JavaScript로 객체 지향 프로그래밍에 대한보다 고전적인 접근 방식을 제시합니다. 하지만 먼저, 당신은 특별히이 경우에, 당신의 SOLID principles을 알 필요는 의존 관계 역전 원칙 (에 설명 된대로 toskv의 코멘트) 상태 :

• 높은 수준의 모듈은 저에 의존하지 말아야 레벨 모듈. 둘 다 추상화에 의존해야합니다.
• 추상화는 세부 정보에 의존해서는 안됩니다. 세부 사항은 추상화에 따라 달라져야합니다.

인터페이스를이 작업에 사용하려면 개체가 주어진 작업을 수행하는 데 필요한 기능 계약을 설명하는 데 사용됩니다.

구체적인 개체는 동작을 제공하는 인터페이스를 구현합니다. 종속성은 구체적인 객체가 아니라 인터페이스를 통해 노출되어야합니다. 이는 느슨한 결합을 허용하고 테스트 가능성과 같은 몇 가지 이점을 갖기 때문입니다.