인터페이스에 메서드 추가하기

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 43번째.

TypeScript 인터페이스를 사용하면 속성 정의와 함께 메서드 시그니처를 포함하여 이러한 동작을 정의할 수 있습니다.

인터페이스의 메서드 시그니처는 실제 구현을 제공하지 않고 메서드의 이름, 매개변수 및 반환 유형을 지정합니다. 이를 통해 인터페이스를 준수하는 모든 객체가 이행해야 하는 계약이 생성됩니다:

interface Person {
  name: string;
  age: number;
  greet(): string;  // 메서드 시그니처
}

let user: Person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

메서드 시그니처 greet(): string은 Person 인터페이스를 구현하는 모든 객체가 매개변수를 받지 않고 문자열을 반환하는 greet 메서드를 가져야 한다는 것을 TypeScript에 알려줍니다. 실제 구현은 서로 다른 객체마다 다를 수 있지만, 시그니처는 정확히 일치해야 합니다.

챌린지

쉬움

다음 속성과 메서드를 가진 Calculator라는 이름의 인터페이스를 만드세요:

string 타입의 brand
string 타입의 model
boolean 타입의 isScientific
두 개의 number 매개변수를 받고 number를 반환하는 add 메서드
매개변수를 받지 않고 string을 반환하는 getInfo 메서드

다음 속성과 메서드를 가진 BankAccount라는 이름의 인터페이스를 만드세요:

string 타입의 accountNumber
number 타입의 balance
boolean 타입의 isActive
number 매개변수를 받고 void를 반환하는 deposit 메서드
매개변수를 받지 않고 number를 반환하는 getBalance 메서드

인터페이스를 사용하여 다음 변수를 만드세요:

Calculator 타입의 myCalculator라는 변수를 만들고, brand는 "Casio", model은 "FX-991EX", isScientific은 true로 설정하세요. 두 매개변수의 합을 반환하는 add 메서드와 "[brand] [model]"을 반환하는 getInfo 메서드도 포함하세요.
BankAccount 타입의 savingsAccount라는 변수를 만들고, accountNumber는 "SAV-12345", balance는 1500, isActive는 true로 설정하세요. 매개변수를 balance에 더하는 deposit 메서드와 현재 balance를 반환하는 getBalance 메서드도 포함하세요.

다음 출력 결과를 각각 별도의 줄에 출력하세요:

myCalculator에서 getInfo 메서드를 호출하고 결과를 출력하세요.
myCalculator에서 인수 15와 27을 사용하여 add 메서드를 호출하고 결과를 출력하세요.
savingsAccount에서 getBalance 메서드를 호출하고 결과를 출력하세요.
savingsAccount에서 인수 250을 사용하여 deposit 메서드를 호출하세요.
savingsAccount에서 getBalance 메서드를 다시 호출하고 결과를 출력하세요.
myCalculator의 isScientific 속성을 출력하세요.

직접 해보기

// TODO: 여기에 코드를 작성하세요
// 필요한 속성과 메서드가 있는 Calculator 인터페이스를 생성하세요
// 필요한 속성과 메서드가 있는 BankAccount 인터페이스를 생성하세요
// Calculator 타입의 myCalculator 변수를 생성하세요
// BankAccount 타입의 savingsAccount 변수를 생성하세요
// 필요한 모든 출력을 출력하세요