6.1 인터페이스란?

<aside> 🗣 인터페이스란?

인터페이스는 타입 체크를 위해 정의한 약속 또는 규칙을 말한다. 일반적으로 인터페이스는 아래 항목에 사용하며 여러 타입으로 이루어진 새로운 타입을 정의하는 것과 같다. ES6에서는 지원하지 않지만 TypeScript에서는 지원한다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터와 반환타입)
• 배열과 객체를 접근하는 방식
• 클래스 </aside>

interface 인터페이스이름{
	속성: 타입;
} 

인터페이스의 생성은 다음과 같은 규칙을 따른다. 맨 앞에 interface 키워드를 적은 뒤 만들고 싶은 인터페이스의 이름을 작성해준다. 인터페이스의 이름은 일반 변수와 헷갈리지 않도록 하기 위해서 관행적으로 맨 앞 글자를 대문자로 작성한다. 그리고 중괄호 안에는 인터페이스 안의 여러 속성과 속성의 타입을 적어준다.

• 인터페이스 적용 전

let robot = { name: 'mimi', age: 3, available: true};

function get_available(obj: { available: boolean }) {
	console.log(obj.available); // true
}

get_available(robot); // true

위 get_available 함수에서 받는 인자의 형태는 available 라는 속성을 갖는 객체이다. 이처럼 인자를 받을 때 단순한 타입 뿐만 아니라 객체의 속성 타입까지 정의할 수 있다. 여기에 인터페이스를 적용하면 어떻게 될까?

• 인터페이스 적용 후

interface Robot_property {
	age: number,
  available: boolean;
}

let robot = { name: 'mimi', age: 3, available: true};

function get_available(obj: Robot_property) {
  console.log(obj.available); // true
}

get_available(robot); // true

get_available()의 인자가 좀 더 명시적으로 바뀐 것을 확인할 수 있다. get_available()의 인자는 Robot_property라는 새로운 타입을 가져야 한다. 인자로 받는 객체의 속성 개수와 인터페이스의 속성 개수는 일치하지 않아도 된다. 인터페이스의 속성들을 객체가 모두 가져야 하지만, 그 외의 속성도 가질 수 있다는 뜻이다. 만약, 인터페이스의 속성들을 객체가 가지고 있지 않다면 오류를 출력해준다.

즉, 인터페이스에 정의된 속성과 타입의 조건만 성립이 된다면 객체의 속성 개수는 더 많아도 문제가 없고, 인터페이스에 선언된 속성의 순서 또한 지키지 않아도 된다.

<aside> 💡 인터페이스와 타입 별칭, 뭐가 다를까?

타입에 새로운 이름을 붙여준다는 점에서 비슷하지만, 몇가지 차이점이 존재한다. 그 중에서도 가장 큰 차이점은 타입의 확장 가능 여부이다.

더 자세한 내용은 6.3 인터페이스와 타입 별칭 비교 에서 알아보기로 한다.

</aside>