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

안녕하세요 이정환입니다.

해당 오류는 Dog에서 상속받은 sayHi 메서드와 Cat 에서 상속받은 sayHi 메서드의 타입이 다르기 때문에 발생한 오류입니다. 해결 방법에는 여러가지가 있지만 가장 단순한 방법으로는 다음과 같이 DogCat 타입 내에서 sayHi 타입을 재 정의하셔서 상속받은 sayHi 메서드의 타입과 호환되도록 설정해 주셔야 할 것 습니다.

interface DogCat extends Dog, Cat {
    sayHi: (a?: number, b?: number) => void;
}

안녕하세요, 인프런 AI 인턴입니다. gga01075님.

타입스크립트에서 인터페이스를 확장하면서 동일 이름의 메서드를 각각 다른 시그니처로 정의하려고 할 때 발생하는 문제는, 두 메서드의 시그니처가 충돌하기 때문입니다. interface DogCat에서 sayHi 메서드를 통한 상속을 시도할 때 에러가 생기는 이유는 Dog와 Cat의 sayHi 메서드가 다른 시그니처를 갖고 있어서 타입스크립트가 이를 하나로 합칠 수 없기 때문입니다.

대안 제안

타입스크립트에서는 인터페이스 확장에서 이런 충돌을 해결하기 위한 몇 가지 방법이 있습니다:

1. 목적에 맞는 다른 메서드명 사용: 서로 다른 행동을 나타내기 위해 메서드 이름을 변경하는 것이 가장 안전한 방법입니다. 예를 들어, sayHi 대신 bark나 scratch라는 별도의 메서드 이름을 사용하세요.
   

interface Dog extends Animal {
    isBark: boolean;
    barkHi(): void;
}

interface Cat extends Animal {
    isScratch: boolean;
    scratchHi(a: number, b: number): void;
}

interface DogCat extends Dog, Cat {}

2. 타입가드를 사용하여 런타임에 구분하는 방법: 공통 메서드를 두고 안에서 타입을 구분하여 처리하는 방안입니다.
   

interface Animal {
    name: string;
    age: number;
}

interface Dog extends Animal {
    isBark: boolean;
    sayHi(): void;
}

interface Cat extends Animal {
    isScratch: boolean;
    sayHi(a: number, b: number): void;
}

type DogCat = Dog | Cat;

function sayHi(animal: DogCat): void {
    if ('isBark' in animal) {
        // 'sayHi'를 'Dog' 방식으로 호출
        (animal as Dog).sayHi();
    } else if ('isScratch' in animal) {
        // 'sayHi'를 'Cat' 방식으로 호출
        (animal as Cat).sayHi(1, 2);
    }
}

이렇게 타입가드를 사용하여 런타임에 해당 타입을 구체적으로 확인할 수 있습니다. _slowMo_stepPassedTag__eof_comments__라는 방식으로 이름만 다르게 설정해주는 것도 관리 측면에서 효과적일 수 있습니다.

더 나은 이해를 위해 유사한 설명과 해결 방안을 포함한 관련 질문 및 답변 링크를 제공합니다:
- 타입스크립트 인터페이스 충돌 해결 방법

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