ts 공부하기) 인터페이스

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

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

 

 

인터페이스 예제

let person = { name: "Batman", age: 30 };

//logAge() 함수에서 받는 인자의 형태는 'age'를 속성으로 갖는 객체
//아래와 같이 인자를 받을 때 단순한 타입 뿐만아니라 객체의 속성 타입까지 정의가능.
function logAge(obj: {age: number}) {
	console.log(obj.age); //30
}
logAge(person); //30

 

인터페이스를 적용한다면

interface personAge {
	age: number,
}

//logAge()의 인자가 위보다 명시적으로 바뀜.
//logAge()의 인자는 personAge 라는 타입을 가져야함.
function logAge(obj: personAge) {
	console.log(obj.age);
}
let person = {name: 'Batman', age: 30};
logAge(person);

인터페이스에 정의된 속성, 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관이 없다. 그리고 인터페이스에 선언된 순서를 지키지 않아도 된다.

 

 

옵션 속성

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

인터페이스 사용시 인터페이스에 정의되어있는 속성을 모두 다 꼭 사용하지 않아도된다. 이를 옵션속성이라고 한다. 

 

interface Musical {
	name: string;
    track?: number;
}

let favMusical = {
	name: 'The Phantom of the Opera',
};
function favArt(art: Musical) {
	console.log(art.myFavMusical); //Error: Property 'myFavMusical'does not exist on type art
}
favArt(favMusical);

//인터페이스에 정의되어있지 않은 속성에 대해서 오류로 표시한다. 오탈자 또한 알려준다.

 

...아무래도 옵션속성에 대해서 좀더 보고와야겠다.