[타입스크립트] 인터페이스

인터페이스란?

쉽게 말해 미리 타입을 정의하는 것이라고 할 수 있습니다.

타입을 지정할 값에 정의한 인터페이스 키워드를 마치 변수처럼 사용할 수 있습니다.

특히 함수의 구조를 정의할 때 인터페이스를 많이 사용한다고 합니다.😎

 

//인터페이스: 미리 타입 정의를 하는 것으로, 타입 별칭과 유사합니다.
interface Example {
  name: string,
  age: number
}

1. 변수에 사용하는인터페이스

변수에 들어가는 데이터의 타입을 미리 정의할 수 있습니다.

 

//1. 변수에 사용하는 인터페이스
interface User {
  name: string,
  age: number
}

var user: User = {name: "hello", age: 25};

2. 함수의 parameter에 사용하는 인터페이스

함수의 parameter에 인터페이스를 적용하면, 함수를 호출할 때의 argument 또한 인터페이스 규칙을 따라야 합니다.

 

//1. 변수에 사용하는 인터페이스
interface User {
  name: string,
  age: number
}

function getUser(user: User) {
  console.log(user);
}

3. 함수의 구조를 정의하는 인터페이스

함수의 parameter, return값 즉 스펙을 정의해줄 수 있습니다.

인터페이스로 함수의 스펙을 정의할 때는 선언과 함수 정의를 분리하여 사용하는데,

이렇게 인터페이스로 지정할 일은 많이 없다고 합니다.

대신 함수의 parameter와 return값을 직접 지정할 수 있긴 합니다.

 

//3. 함수 전체 타입을 정의하는 인터페이스
interface AddFunc {
  (num1: number, num2: number): number
}

//함수의 스펙에 대해 정의할 때는 선언과 함수 정의를 분리합니다.
//다만 인터페이스로 함수의 스펙을 정의할 일은 많이 없다고 합니다.
//대신 함수의 parameter와 return값에 대한  타입 정의를 함수에 직접 할 수 있습니다.
let add: AddFunc;

add = function(num1, num2){
  return num1 + num2;
}

4. 인덱싱 방식을 정의하는 인터페이스

*인덱싱 방식이란? 인덱스로 배열의 요소에 접근하는 방법

 

이렇게 인덱스로 접근하는 값의 타입을 인터페이스를 사용하여 미리 지정해줄 수 있습니다.

인덱싱 방식에 인터페이스를 정의하면 인덱스로 접근하는 값에 대한 타입 규칙을 따라야 합니다.

 

예를 들어, 인덱싱 방식에 정의한 인터페이스가 문자열인 경우,

인덱스로 접근한 값에 문자열이 아닌 숫자를 할당하려고 하면 에러가 발생합니다.

 

//3. 인덱싱 방식을 정의하는 인터페이스: 인덱스로 접근하는 값에 대한 할당 타입을 지정합니다.
interface AlphabetArr {
  [index: number]: string
}

let arr: AlphabetArr = ['a', 'b', 'c'];
arr[0] = 'A';
//arr[1] = 10; //인덱스로 접근하는 값에 대한 타입 정의와 맞지 않아 에러 발생

4-1. 인터페이스 딕셔너리 패턴

*딕셔너리 패턴이란? 객체의 속성을 어떻게 접근할 것인지 정의하는 방식

객체의 값에 접근하는 방식을 일컫는 말이라고 하면 되겠습니다.

 

아래와 같이 객체의 key와 value 각각에 타입을 정해주었습니다.

 

//4. 딕셔너리 패턴
interface StringRegexDictionary {
  [key: string]: RegExp
}

var obj = {
  cssfile: /|.css$/,
  jsfile: /|.js$/
}

5. 인터페이스 확장

인터페이스를 받아서 또다른 인터페이스를 만들 때 사용합니다.

extends 키워드와 함께 사용합니다. 

 

//5. 인터페이스 확장
interface Person {
  name: string,
  age: number
}

interface Job extends Person {
  job: string
}

var personObj: Job = {
  name: 'hello',
  age: 25,
  job: 'developer'
}

 

 

또한 extends 키워드를 활용해 인터페이스를 확장할 수 있는 것은

타입 별칭(type alias)와 구분되는 인터페이스만의 장점이라고 할 수 있습니다.

 

타입 별칭(type alias)란 특정 타입에 대해 이름 즉 별칭을 부여하는 것으로,

타입을 생성하는 것이 아니라 이름만 부여한 것입니다.

타입 별칭은 인터페이스와 달리 확장할 수 없습니다.

 

그렇다면 어떤 것을 써야 할까요?

소프트웨어프로그래밍 원칙중 하나인 OCP에 따르면, '확장에는 열려있으면서 수정에는 닫혀있는' 개발, 즉 원래 코드를 변경하기 않으면서 기능을 확장하는 방식으로 개발하는 것이 유지보수 측면에서 유리하다고 합니다. 이러한 원칙을 적용해보면, 타입 별칭 보다는 원래 코드를 유지하면서도 확장시킬 수 있는 인터페이스를 쓰는 것이 적합하다는 것을 알 수 있습니다. 저 또한 개발 공부를 하면서 양적인 성장 뿐만 아니라 코드를 많이 보면서 좋은 코드, 품질 높은 코드에 대한 관심을 계속하고자 합니다.😊

---

인프런의 유료 강의 '타입스크립트 입문 - 기초부터 실전까지'를 수강하고 작성하는 글입니다.

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

(강의 제공자이신 캡틴판교 님의 타입스크립트 핸드북도 같이 참고하면 좋습니다.😇)