인터페이스

소개

인터페이스는 서로 다른 전기제품이 같은 모양의 플러그를 공유함으로써 다양한 제품들을 동일한 콘센트에 연결할 수 있는 것처럼, 프로그래밍에서도 다르게 동작하는 객체를 같은 방식으로 사용할 수 있도록 도와줍니다. 이를 통해 코드의 일관성과 가독성을 높일 수 있습니다.

인터페이스와 객체

기본 문법은 type aliase와 비슷합니다. 

interface Person {
  name: string;
  age?: number;
}

function greet(guest: Person) {
  console.log(`안녕하세요, ${guest.name}님!`);
}

const user: Person = {
  name: '홍길동',
  age: 25,
};

greet(user); // "안녕하세요, 홍길동님!"

greet함수의 인자는 인터페이스 Person을 따르는 객체만이 올 수 있습니다. 따라서 greet 함수 내에서는 매개변수 guest가 name, age 프로퍼티를 가지고 있을 것이라는 것을  확신하고 호출할 수 있게 됩니다. 

한편 아래의 코드는 user2에 name이 없기 때문에 오류가 발생합니다. 반면, age 뒤에 ?가 있기 때문에 age는 생갹이 가능합니다. 

const user2 : Person = {}
greet(user2)

인터페이스의 상속

인터페이스 Person을 그대로 두고 추가적인 속성을 가지고 있는 인터페이스를 만들려면 상속을 사용하면 됩니다.  

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

interface Employee extends Person {
  position: string;
}

function greet(guest: Employee) {
  console.log(`안녕하세요, ${guest.name}님! 당신은 ${guest.position}이군요.`);
}

const user: Employee = {
  name: '홍길동',
  age: 25,
  position: '개발자',
};

greet(user); // 안녕하세요, 홍길동님! 당신은 개발자이군요.

인터페이스와 함수

인터페이스는 함수의 형식을 지정하는데도 사용할 수 있습니다. 

interface Greeting {
  (name: string, age: number): string;
}

const greeting: Greeting = (name, age) => {
  return `안녕하세요, ${name}님! 당신은 ${age}살입니다.`;
};

다루지 않은 내용

• 인터페이스를 클래스에 적용하기
• 인터페이스와 제네릭