. - 인프런 | 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. 이지원님, 질문해 주셔서 감사합니다.

질문해주신 내용에서 abstract class를 사용하여 공통의 기능과 타입을 정의하고, 이를 상속받는 클래스를 통해 다양한 구현을 하고 싶으신 것으로 보입니다. 그리고 그 과정에서 Vue.js 컴포넌트의 props 타입으로 abstract class를 직접 사용할 때 발생하는 컴파일 에러를 해결하고자 하시는군요.

이 문제를 해결하는 데 몇 가지 접근 방법을 제안드릴 수 있습니다.

제네릭을 사용하는 방법: props 타입에 제네릭을 적용하여 다양한 타입을 수용할 수 있게 합니다. 이렇게 하면 다른 grimpan 타입이 추가되더라도 props 타입을 일일이 수정하지 않아도 됩니다.

   interface Props<T extends Grimpan> {
     grimpan: T;
   }

팩토리 패턴 사용: 실제로 생성되는 grimpan 객체는 Grimpan 타입을 구현(상속)한 인스턴스이므로, 팩토리 패턴을 사용해 생성 시 타입을 해결할 수 있습니다.
Type Assertion 사용: as 키워드를 활용해 타입을 명시적으로 설정할 수도 있지만, 이는 타입 안전성을 포기하는 방법이므로 권장하지 않습니다. 하지만 급한 경우에 임시로 사용해 볼 수는 있습니다.
Abstract Class와 Interface 조합 사용: 만약 abstract class와 interface의 조합을 사용하여, interface로 타입 체크를 강화하면서, abstract class로 공통 로직을 제공하는 방법도 고려해볼 수 있습니다.

여기서 제시해드린 방법과 관련하여 abstract class와 interface의 장단점 및 패턴에 대한 교수님의 강의 내용도 다시 한 번 점검해보시길 권장합니다. 학습에 도움이 되실 만한 예전 답변은 아래 링크에서 확인하실 수 있습니다:

타입스크립트에서 클래스와 인터페이스 사용법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

.