[TypeScript] 인터페이스 (Interface)

---

자바스크립트에서는 인터페이스가 존재하지 않지만, 자바, C, 타입스크립트와 같은 정적 타입 언어에서는 자주 사용되는 개념이다. 자바에서의 인터페이스는 클래스에서 꼭 구현해야 하는 메소드를 정의할 때 사용된다.

인터페이스는 상호 간에 정한 약속이나 규칙을 의미하는데, 타입스크립트에서의 인터페이스는 리액트 프로젝트에서 가장 많이 쓰이는 타입 중 하나로 인터페이스 변수, 함수, 클래스, 파라미터 등의 범주에서 약속을 정의한다. 주로 state와 props의 타입을 정의하는 데 사용한다.

1. 객체 타입 정의

인터페이스는 객체의 타입을 정의할 때 사용된다.

function getInfo(restaurant: { name: string }) {
	console.log(restaurant.name);
}

getInfo 함수는 매개변수로 name 프로퍼티가 포함된 객체를 받는데, 하나일 때는 괜찮지만, 여러 개가 되는 경우 가독성도 떨어지기 때문에 이런 경우에는 아래와 같이 interface를 활용해 따로 꺼내서 쓰는 것이 좋다. 

interface Restaurant {
	name: string;
	star: 5;
}

function getInfo(restaurant: Restaurant) {
	console.log(restaurant.name);
}

const pinetree = {
	name: "대나무한정식",
	star: 5
};

getInfo(pinetree);

2. 다양한 프로퍼티 타입

객체의 프로퍼티 타입을 정의할 때 다양하게 사용할 수 있다.

// readonly는 읽기만 가능한 프로퍼티로, 값을 수정할 수 없다
// 프로퍼티명 다음에 물음표(?)를 사용하면 해당프로퍼티를 추가해도 되고 안해도 된다
interface Restaurant {
	readonly name: string;
	star: number;
	address?: string;
}

const pinetree: Restaurant = {
	name: "대나무한정식",
	star: 5,
};

pinetree.name = "pinetree";  // 에러: Cannot assign to 'name' because it is a read-only property.
pinetree.star = 4;

const char: Restaurant = {
	name: "차알",
	star: 5,
	address: "광화문",
};

3. 인터페이스 확장

3.1 extends 키워드 활용

extends 키워드를 사용하여 기존에 정의된 인터페이스를 확장하여 사용할 수도 있다.

interface BasicInfo {
	name: string;
	star: number;
}

interface DetailInfo extends BasicInfo {
	address: string;
	phone: string;
	position: number[];
}

const char: BasicInfo = {
	name: "차알",
	star: 5,
};

const pinetree: DetailInfo = {
	name: "대나무한정식",
	star: 5,
	address: "동대문",
	phone: "123-456-7890",
	position: [37.565496, 126.99142],
};

3.2 교차 타입(Intersection Types)

교차 타입은 새로운 인터페이스를 만드는 것은 아니고, & 기호를 사용하여 기존에 정의했던 인터페이스를 합쳐 새로운 타입을 만드는 것이다.

interface BasicInfo {
	name: string;
	star: number;
}

interface DetailInfo {
	position: number[];
}

type Info = BasicInfo & DetailInfo;

4. Type vs Interface 타입과 인터페이스

(👇 별도의 포스팅에 작성)

1/10 TIL | 오답노트 작성. type과 interface.