[Ts] 인터페이스

1️⃣ 인터페이스란?

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주의 대해 약속을 정의할 수 있다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 변환 타입)
• 배열과 객체를 접근하는 방식
• 클래스

인터페이스 적용하기

let person = { name: 'Bj', age: 28 };

function logAge(obj: { age: number }) {
  console.log(obj.age); // 28
}
logAge(person); // 28

• 위 logAge() 함수에서 받는 인자의 형태는 age를 속성으로 갖는 객체이다.
• 여기에 인터페이스를 적용하면 아래 코드와 같이 나온다.
  
  

interface personAge {
  age: number;
}

function logAge(obj: personAge) {
  console.log(obj.age);
}
let person = { name: 'Bj', age: 28 };
logAge(person);

• 인터페이스를 적용하면 logAge()의 인자가 좀 더 명시적으로 바뀌었다.
• 인터페이스를 인자로 받아 사용할 때 항상 인터페이스의 속성 갯수와 인자로 받는 객체의 속성 갯수를 일치시키지 않아도 된다.
• 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.

옵션 속성

인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 꼭 사용하지 않아도 된다.

interface CraftBeer {
  name: string;
  hop?: number;  
}

let myBeer = {
  name: 'Bj'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); // Saporo
}
brewBeer(myBeer);

• hop을 옵션 속성으로 선언했기 때문에 brewBeer() 함수에서 Beer 인터페이스를 인자의 타입으로 선언해도 인자로 넘긴 객체에는 hop 속성이 없어도 된다.

인터페이스 확장

interface Person {
  name: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';

• 인터페이스도 인터페이스 간에 확장이 가능하다.

interface Person {
  name: string;
}
interface Drinker {
  drink: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'Bj';
fe.skill = 'TypeScript';
fe.drink = 'Beer';

• 여러 인터페이스를 상속받아 사용할 수 있다.