인터페이스 관련 질문입니다!

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

인터페이스

작성

251

interface Person {
  name: string;
  age: number;
  sayHi(): void;
  // 오버로딩
  sayHi(a: number, b: number): void;
}

const person: Person = {
  name: "name",
  age: 1,
  sayHi(a?: number, b?: number) {
    if (a && b) {
      console.log("hi" + a + b);
    } else {
      console.log("No paramete");
    }
  },
}

해당 코드를 sayHi 메소드에 파라미터가 없으면 void를 return 하고 2개이면 number 를 return하게 만들고싶을땐 어떤식으로 해야할까요?

interface Person {
  name: string;
  age: number;
  sayHi(): void;
  // 오버로딩
  sayHi(a: number, b: number): number;
}

const person: Person = {
  name: "name",
  age: 1,
  sayHi(a?: number, b?: number) {
    if (a && b) {
      console.log("hi" + a + b);
        return a+b ;
    } else {
      console.log("No parameter");
    }
  },
}

이런식으로 했더니 오류가 생기더라고요 ㅜㅜ

typescript

답변 2

이정환 Winterlood

지식공유자

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

AI 인턴이 좋은 답을 해 주었네요

저도 몇자 달아보자면 구현시그니쳐의 반환값 타입을 any 타입으로 정의해서도 해결하실 수 있습니다.

interface Person {
  name: string;
  age: number;
  sayHi(): void;
  sayHi(a: number, b: number): number;
}

const person: Person = {
  name: "name",
  age: 1,
  sayHi(a?: number, b?: number): any {
    if (a && b) {
      console.log("hi" + a + b);
      return a + b;
    } else {
      console.log("No parameter");
    }
  },
};

const a = person.sayHi();
// void 타입으로 추론 됨

const b = person.sayHi(1, 2);
// number  타입으로 추론 됨

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

인터페이스에서 오버로딩을 사용하여 파라미터에 따라 다른 타입을 반환하도록 하는 것은 불가능합니다. 인터페이스에서는 함수 시그니처를 정의할 수는 있지만, 구현부에서는 오버로딩이 불가능하기 때문입니다.

대신에, 클래스를 사용하여 원하시는 기능을 구현하실 수 있어요. 아래는 클래스를 사용한 예시입니다.

interface Person {
  name: string;
  age: number;
  sayHi(): void;
}

class PersonImpl implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHi(): void;
  sayHi(a: number, b: number): number;
  sayHi(a?: number, b?: number): void | number {
    if (a && b) {
      console.log("hi" + a + b);
      return a + b;
    } else {
      console.log("No parameter");
    }
  }
}

const person: Person = new PersonImpl("name", 1);
person.sayHi();
person.sayHi(2, 3);

위의 예시에서는 클래스를 사용하여 인터페이스 Person을 구현하고, sayHi 메소드를 오버로딩하였습니다. 이렇게 하면 파라미터에 따라 다른 동작을 수행할 수 있고, 반환 타입도 다르게 정의할 수 있습니다.

이 방법을 사용하면 원하시는 기능을 구현하실 수 있을 거에요. 참고로, 오버로딩을 사용하기 위해서는 클래스의 메소드 시그니처를 선언하고, 구현부에서는 오버로딩된 메소드들을 오버라이딩하는 방식으로 작성해야 합니다.

추가적인 질문이 있다면 언제든지 물어보세요!

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

인터페이스 관련 질문입니다!