[TS] 인터페이스

인터페이스(Interface)란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법으로,

상속, 합침 등의 특수한 기능을 제공하기 때문에 객체의 구조를 정의하는 데 특화되어 있다.

// 타입 별칭
type A = {
  a: string;
  b: number;
};

// 인터페이스
interface A {
  a: string;
  b: number;
};

타입 별칭과 인터페이스는 유사해 보이지만, 인터페이스는 객체 타입을 정의하는 데 더 특화된 기능을 제공한다.

 

인터페이스의 기본 기능

선택적 프로퍼티와 읽기 전용 프로퍼티

타입 별칭과 마찬가지로 선택적 프로퍼티와 읽기 전용 프로퍼티를 정의할 수 있다.

선택적 프로퍼티

프로퍼티에 ?를 붙여 선택적 프로퍼티로 만들면 생략 가능하다.

interface Person {
  name: string;
  hp?: number;
}

const person: Person = {
  name: "고견",
};

 

읽기 전용 프로퍼티

readonly 키워드를 사용하면 읽기 전용 프로퍼티가 되어 수정할 수 없다.

interface Person {
  readonly name: string;
  hp?: number;
}

const person: Person = {
  name: "고견",
};

person.name = "devmark"; // ❌ 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.

 

메서드 타입 정의

인터페이스에서 메서드의 타입을 정의하는 방법은 두 가지다.

방법 1: 함수 타입 표현식

interface Person {
  readonly name: string;
  hp?: number;
  sayHi: () => void; 
};

const person: Person = {
  name: "고견",
  sayHi: function() {
    console.log("Hi");
  },
};

 

방법 2: 호출 시그니처

interface Person {
  readonly name: string;
  hp?: number;
  sayHi: (a: number, b: number) => void; 
};

 

함수 타입 표현식으로는 메서드 오버로딩을 구현할 수 없지만, 호출 시그니처로는 가능하다.

interface Person {
  readonly name: string;
  hp?: number;
  sayHi(): void; // 오버로딩 가능 ✅
  sayHi: (a: number, b: number) => void; // 오버로딩 가능 ✅
};

 

하이브리드 타입

인터페이스는 함수이면서 동시에 일반 객체처럼 프로퍼티를 가지는 타입을 정의할 수 있다.

interface Func2 {
  (a: number): string;
  b: boolean;
}

const func: Func2 = (a) => "hello";
func.b = true;

Func2 인터페이스는 호출 시그니처와 프로퍼티를 함께 가지므로, func는 함수로 호출할 수도 있고, b 프로퍼티에 접근할 수도 있다.

 

주의할 점

인터페이스는 타입 별칭과 몇 가지 차이점이 존재한다.

 

타입 별칭에서는 Union이나 Intersection 타입을 정의할 수 있다.

type Type1 = number | string;
type Type2 = number & string;

 

하지만 인터페이스에서는 Union이나 Intersection 타입을 직접 정의할 수 없다.

interface Animal {
  name: string;
  age: number;
} | number // ❌

 

대신 타입 주석에서 Union이나 Intersection 타입을 사용할 수는 있다.

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

const animal: Animal | number = {
  name: "푸바오",
  age: 3,
};