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

인터페이스

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

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

쉽게 말해, 복잡하고 긴 속성들의 타입을 변수처럼 미리 설정해 놓고 사용하는 것이다.

---

타입스크립트에서는 모든 변수마다 타입을 설정해야 한다. 그런데 다음과 같이 {id: number, title: string, done: boolean}이라는 객체의 속성 타입을 계속 입력해줘야 한다면 상당히 번거로울 수 있으며, 오탈자가 나기 쉽다.

let todoItems: {id: number, title: string, done: boolean}[];

function fetchTodoItems(): {id: number, title: string, done: boolean}[] {
  const todos = [
    { id: 1, title: `안녕`, done: false },
    { id: 2, title: `타입`, done: false },
    { id: 3, title: `스크립트`, done: false },
  ];
  return todos;
}

function fetchTodos(): {id: number, title: string, done: boolean}[] {
  const todos = fetchTodoItems();
  return todos;
}

하지만 인터페이스를 사용하면 다음과 같이 코드가 훨씬 간단해지며 오탈자의 위험도 낮아진다.

// 인터페이스 선언
interface 🔸Todo {
  id: number;
  title: string;
  done: boolean;
}

let todoItems: 🔸Todo[];

function fetchTodoItems(): 🔸Todo[] {
  const todos = [
    { id: 1, title: `안녕`, done: false },
    { id: 2, title: `타입`, done: false },
    { id: 3, title: `스크립트`, done: false },
  ];
  return todos;
}

function fetchTodos(): 🔸Todo[] {
  const todos = fetchTodoItems();
  return todos;
}

---

함수의 인자를 정의하는 인터페이스

함수의 인자로 들어올 데이터의 타입을 정의하는 인터페이스를 살펴보자.

User라는 인터페이스를 만들고 함수의 인자로는 User의 형식을 따르는 데이터만 인자로 받는 getUser라는 함수를 만든다고 해보자.

interface 🔸User {
  age: number;
  name: string;
}

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

const jiho = {
  name: "지호",
};

getUser(jiho); ❌

getUser의 인자로 User의 인터페이스와 다른 타입의 데이터를 받으면 에러를 표시한다.

프론트의 입장에서 API로 데이터를 받아와서 인터페이스에 맞는지 활용하는 데에 쓰이면 좋다.

함수 스펙(구조)을 정의하는 인터페이스

함수의 인자와 반환값의 타입을 정의하는 함수 스펙 정의 인터페이스를 살펴보자.

SumFunction이라는 인자 a와 b의 타입과 반환값의 타입을 number로 하는 인터페이스를 만들어보자.

interface 🔸SumFunction {
  (a: number, b: number): number;
}

var sum: 🔸SumFunction;
sum = function (a, b) {
  return a + b;
};

sum이라는 함수의 function 예약어에 커서를 올려보면 받는 파라미터와 반환값의 타입이 모두 number로 되어있는 것을 알 수 있다.

---

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

배열의 인덱스의 타입은 숫자이고 이 인덱스로 특정 요소를 접근했을 때 해당 요소의 타입은 string 이라는 StringArray인터페이스를 작성해보자.

interface 🔸StringArray {
  [index: number]: string;
}

var arr: 🔸StringArray = ["a", "v", "f"];
arr[0] = 10; ❌

배열의 인덱싱으로 할당을 할 때, string타입이 아니라면 에러를 표시한다.

인터페이스 딕셔너리 패턴

key는 string, value는 RegExp(정규표현식)로 타입 지정한 StringRegexDictionary이라는 인터페이스를 만들어 사용해보자.

interface 🔸StringRegexDictionary {
  [key: string]: RegExp;
}

var obj: 🔸StringRegexDictionary = {
  css: /\.css$/,
  js: /\.js$/,
};

---

인터페이스 확장(상속)

인터페이스는 기존의 인터페이스를 받아 확장하여 사용할 수 있다.

Person이라는 인터페이스를 확장한 Developer라는 인터페이스를 만들어보자.
새로 만드는 인터페이스명 뒤에 extends <확장하려는 인터페이스> 를 덧붙여 코드를 작성하면 된다.

interface Person {
  name: string;
  age: number;
}

interface 🔸Developer extends Person {
  language:string;
}

var 천둥의신: 🔸Developer = {
  name: "토르",
  language: "아스가르드어",
  age: 1000,
};