인터페이스
인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다.
타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.
•
객체의 스펙 (속성과 속성의 타입)
•
함수의 파라미터
•
함수의 스펙 (파라미터, 반환 타입 등)
•
배열과 객체를 접근하는 방식
•
클래스
인터페이스 맛보기
let person = { name: 'Capt', age: 28 };
function logAge(obj: { age: number }) {
console.log(obj.age); // 28
}
logAge(person); // 28
TypeScript
복사
위 logAge() 함수에서 받는 인자의 형태는 age를 속성으로 갖는 객체이다.
이렇게 인자를 받을 때 단순한 타입 뿐만 아니라 객체의 속성 타입까지 정의할 수 있다.
여기에 인터페이스를 적용한다면
interface personAge {
age: number;
}
function logAge(obj: personAge) {
console.log(obj.age);
}
let person = { name: 'Capt', age: 28 };
logAge(person)
TypeScript
복사
logAge()의 인자가 좀 더 명시적으로 바뀌었다.
logAge()의 인자는 personAge라는 타입을 가져야한다.
•
위 코드에서 추론할 수 있는 점은, 인터페이스를 인자로 받아 사용할 때, 항상 인터페이스의 속성 갯수와 인자로 받는 객체의 속성 갯수를 일치시키지 않아도 된다는 점이다.
•
다시 말해, 인터페이스에 정의된 속성, 타입의 조건만 만족한다면, 객체의 속성 갯수가 더 많아도 상관 없다는 의미!
•
또한, 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.
옵션 속성
•
인터페이스를 사용할 때, 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지 않아도 된다. 이를 옵션 속성이라고 한다
interface 인터페이스_이름 {
속성?: 타입;
}
TypeScript
복사
이처럼 속성의 끝에 ? 를 붙인다.
interface CraftBeer {
name: string;
hop?: number;
}
let myBeer = {
name: 'Sapporo'
};
function brewBeer(beer: CraftBeer) {
console.log(beer.name); // Sapporo
}
brewBeer(myBeer);
TypeScript
복사
→ 코드를 보면 brewBeer() 함수에서 Beer 인터페이스를 인자의 타입으로 선언했음에도 불구하고, 인자로 넘긴 객체에는 hop 속성이 없다. 왜냐하면 hop을 옵션 속성으로 선언했기 떄문.