인터페이스(interface)

인터페이스란?

일반적으로 인터페이스는 상호 간에 정의한 약속을 의미한다. 타입스크립트에서는 객체, 함수, 클래스, 배열 등에서 인터페이스를 통한 타입 지정을 할 수 있다.

인터페이스의 장점

인터페이스를 사용할 경우에는 불필요한 반복을 없애고 인터페이스의 상속을 통해 코드를 재사용할 수 있다.

인터페이스의 사용

• 인터페이스 변수의 첫 글자는 대문자이다.

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

const seho: User = { name: "hi", age: 100 };

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

인터페이스에 Object에서 사용한 변수에 대한 타입을 미리 지정할 수 있다.
타입이 맞지 않는다면 에러를 발생시킨다.

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

let sum: SumFunction = function (num1, num2) {
  return num1 + num2;
};
sum(1, 2);

인터페이스는 함수의 매개변수 타입과 함수의 리턴타입을 설정할 때도 사용 가능하다.그러나 함수의 타입 설정은 굳이 인터페이스를 사용하지 않아도 괜찮다. 처음 함수 설정 시에 타입을 지정해주면 되기 때문이다.

interface StringArray {
  //인덱스값으로는 숫자만 가능하며 배열은 string 값만 들어간다.
  [index: number]: string;
}
let arr: StringArray;
arr[0] = "hi";
arr[1] = 10; //Error

배열에 타입을 지정할 때도 인터페이스 사용이 가능하다. []안에 number로 지정해주면서 인덱스 값으로는 number타입만 가능하게 하고, 배열을 string 배열로 지정하면서 string이 아닌 다른 값은 배열의 값으로 넣지 못하도록 한다.

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

const obj: StringRegexDictionary = {
  sth: /abc/,
};

Dictionary와 같은 구조에서도 타입을 지정할 수 있는데 [key : string] 을 사용하여 key값에 들어오는 변수는 string 값을 가지며, value값은 RegExp를 가져야한다.

// 인터페이스 확장
interface Person {
  name: string;
  age: number; // 옵셔널 선택자 ? 동일하게 적용 가능
}
interface Developer extends Person {
  language: string;
}
const joo: Developer = { name: "joo", age: 20, language: "ts" };

미리 선언된 인터페이스를 상속받아서 추가적인 인터페이스를 생성할 수 있다. 이렇게 사용할 경우 불필요한 반복을 줄이고, 재사용성이 향상된다.

인터페이스와 타입 별칭의 차이점

1. 타입 별칭은 인터페이스 형식뿐만 아니라 모든 곳에서 사용가능하다.

type MyString = string;
let str : MyString = 'hello';

2. 타입 별칭으로 선언된 타입에 마우스를 갖다 대면 해당 타입에 대한 구조를 확인할 수 있으나 인터페이스는 interface에 대한 정보만이 나오게 된다.

<인터페이스에 대한 정보>

<타입 별칭에 대한 정보>

3. 타입별칭은 인터페이스처럼 확장할 수 없다.
타입별칭으로 선언된 타입은 인터페이스가 extends를 통해 확장을 하는 것처럼 이용할 수 없다.