> 웹 프론트엔드 > JS 튜토리얼 > [PART A SOLID Typescript에 대한 간략한 소개]

[PART A SOLID Typescript에 대한 간략한 소개]

DDD
풀어 주다: 2024-12-31 05:08:09
원래의
974명이 탐색했습니다.

[Part A Brief Introduction to SOLID Typescript

I - 인터페이스 분리 원칙(ISP)

클라이언트가 사용하지 않는 인터페이스를 구현하도록 강요해서는 안 됩니다.

이는 인터페이스가 작고 구현 클래스의 요구 사항에 맞게 구체적이어야 함을 의미합니다.
예:

❌나쁨

interface Work{
    eat(): void;
    work(): void;
}

class Developer implements Work{
    eat() {
        console.log("eat");
    }
    work() {
        console.log("work");
    }
}
class Robot implements Work{
    eat() {
        throw new Error("eat"); // Robot does not need to inherit eat() method
    }
    work() {
        console.log("work");
    }
}
로그인 후 복사

✅좋아요

interface Workable  {
    work(): void;
}
interface Eatable {
    eat(): void;
}
class Developer implements Workable, Eatable {
    eat() {}

    work(): void {
    }
}
로그인 후 복사

인터페이스의 강점을 바탕으로 하나의 클래스가 여러 인터페이스를 구현할 수 있습니다. 수업의 필요에 더 잘 맞도록 인터페이스를 더 작은 부분으로 나누어야 합니다


D - 종속성 역전 원칙(DIP)

*상위 수준 모듈은 하위 수준 모듈에 종속되어서는 안 됩니다. 둘 다 추상화에 의존해야 합니다.
*

이 원칙은 의존성 주입의 사용을 권장합니다
예:

❌나쁨

class BackendDeveloper {
    develop(){
        console.log("Developing developer");
    }
}
class FrontendDeveloper {
    develop(){
        console.log("FrontendDeveloper");
    }
}
class Project {
    backendDeveloper: BackendDeveloper;
    frontendDeveloper: FrontendDeveloper;
    constructor() {
        this.backendDeveloper = new BackendDeveloper();
        this.frontendDeveloper = new FrontendDeveloper();
    }
    build(){
        this.backendDeveloper.develop();
        this.frontendDeveloper.develop();
    }
}
로그인 후 복사

코드 조각에는 여러 가지 문제가 있습니다. 그러나 볼 수 있는 가장 중요한 문제는 다음과 같습니다.

  • MobileDeveloper()를 추가하려면 이를 사용하는 다른 메서드에 영향을 미치는 Project()를 수정해야 합니다
  • Project()는 backendDeveloper 및 frontendDeveloper와 긴밀하게 연결되어 있습니다.

✅좋아요

interface Developer {
    developer(): void
}
class BackendDev implements Developer {
    developer() {
        console.log("Developer Developer");
    }
}
class FrontendDeveloper implements Developer {
    developer() {
        console.log("Developer Developer");
    }
}
class Project {
    constructor(private developers: Developer[]) {
    }
    build(){
        this.developers.forEach(developer => {developer.developer();});
    }
}

로그인 후 복사

상위 수준 모듈은 추상화(개발자 인터페이스)에 따라 다릅니다.
하위 수준 모듈은 추상화를 구현합니다.
커플링이 느슨해 확장 및 유지관리가 쉽습니다.

MobileDev 추가:

class MobileDeveloper implements Developer {
  develop() {
    console.log("Writing mobile code");
  }
}

// Usage
const developers: Developer[] = [
  new BackendDeveloper(),
  new FrontendDeveloper(),
  new MobileDeveloper(), //easy to add and make it does not change in Project()
];
const project = new Project(developers);
project.build();

로그인 후 복사

감사합니다 :)))

위 내용은 [PART A SOLID Typescript에 대한 간략한 소개]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿