How to use Interface in TS

지난 포스트에서는 타입스크립트가 무엇인지, 자바스크립트와 차이점이 무엇이고 실제로 어떻게 동작하는 지 간단히나마 살펴보았다.

또한, 하나의 함수를 생성하여 해당 함수가 필요로하는 인자들의 필수여부를 ? 기호를 사용하여 지정하였다.

타입스크립트는 함수가 사용하는 파라미터에 대해 각각의 데이터 타입을 지정해줄 수 있는데, whatAmI 함수에 데이터 타입을 지정하면 아래와 같은 형태가 된다.

// string 타입의 이름, number 타입의 나이, string 타입의 성별을 인자로 전달받는 함수 whatAmI
const whatAmI = (name: string, age: number, gender: string) => {
	alert(`My Name is ${name}, I am ${age} years old, I am a ${gender}`);
};

또한 해당 함수가 반환하는 데이터에 대해서도 데이터 타입을 지정할 수 있다.

// 아무것도 반환하지 않는(void) 함수 whatAmI
const whatAmI = (name: string, age: number, gender: string): void => {
	alert(`My Name is ${name}, I am ${age} years old, I am a ${gender}`);
};

데이터 타입을 정의한 함수를 호출할 때, 정해진 타입으로 인자를 구성하지 않으면 오류가 발생할 것이다.

그런데 선언할 함수의 파라미터 수가 많아진다면 어떻게 처리해야 될까?
또한 동일한 파라미터를 사용하는 (데이터 셋이 동일한) 함수가 많아질 경우 어떻게 처리해야 할까?

이 중 하나라도 파라미터의 데이터 타입이 변경되면, 모든 함수의 파라미터를 전부 바꿔주어야 하는 불편함이 생길 것이다.

이 때 사용할 수 있는 것이 인터페이스이다.

STEP 4. 인터페이스 사용 방법

# ./index.ts
# Name: whatAmI
# Description: 내 자신을 설명해주는 함수 (인터페이스 사용)

# Human 인터페이스 선언
interface Human {
	name: string;
	age: number;
	gender: string;
};

// 지정된 Human 인터페이스의 데이터 타입과 동일하지 않은 인자가 들어올 경우 선언부에서 오류를 발생시킴
const whatAmI = (human: Human) => {
  alert(`My Name is ${human.name}, I am ${human.age} years old, I am a ${human.gender}`);
};

# 다음은 whatAmI 함수를 호출했을 때, 각 인자로 들어온 데이터의 타입 별로 동작 처리를 케이스로 분류한 것이다.
# Case 1, 데이터 타입이 일치할 때
whatAmI('Lucas', 24, 'male');
# 실행 결과: "My Name is Lucas, I am 24 years old, I am a male"

# Case 2, 데이터 타입이 일치하지 않을 때
whatAmI('Lucas', '999', 'male');
# 실행 결과: typeScript Error  // 호출되는 함수의 파라미터 인터페이스와 일치하지 않아 오류 발생 

이렇게 함수에 타입 처리를 진행하면, 확실히 에러에 대한 트러블 슈팅 및 핸들링에 용이해 진다는 커다란 장점이 있다.

인터페이스의 사용은 타입스크립트 내에서만 가능하다.

만약 자바스크립트에서 타입스크립트와 동일한 개념을 사용하고자 한다면 클래스를 사용하는 것이 좋은 예이다.