인턴 기간 중 초반에 타입스크립트에서 객체 타입을 정의할 때 interface가 아닌 type을 사용하였다. 그런데 멘토 분께서 type 말고 interface로 사용하라고 하셨고, 그 이후로 습관적으로 interface를 사용해왔는데 그 이유를 작성해보려 한다.

---

type, interface 공통점

--> 객체의 타입을 정의하기 위해 사용된다.

// interface
interface TempInterface {
  text: string;
  num: number;
}

const temp1: TempInterface = {
  text: 'happyhyep',
  num: 7,
}

// type
type TempType = {
  text: string;
  num: number;
}

const temp2: TempType = {
  text: 'happyhyep',
  num: 7,
}

위 코드처럼 interface와 type 모두 선언하는 방식에는 큰 차이가 없다.

type, interface 차이점

1️⃣ 확장 방법

// interface
interface TempInterface {
  text: string;
  num: number;
}

interface TempTempInterface extends TempInterface {
  isTrue: boolean;
}

// type
type TempType {
  text: string;
  num: number;
}

type TempTempType = TempType & {
  isTrue: boolean;
}

이렇게 interface는 extends로, type은 &로 확장할 수 있다.

2️⃣ 선언적 확장

interface TempInterface {
  text: string
}

interface TempInterface {
  num: number
}
// 가능

이렇게 interface를 선언해주면 자동으로 확장이 되지만,

type TempType {
  text: string
}

type TempType {
  num: number
}
// 불가능

type에서는 확장되지 않고 중복되었다며 error가 발생한다.

3️⃣ computed value의 사용

그리고 이 세번째 내용은 이번에 찾으며 알게된 (내 기준에서) 놀라웠던 차이인데, 항상 interface로만 썼다보니 type에서는 이렇게 할당하는 것이 가능한지 몰랐어서 이런 경우에는 type을 사용하는 것도 괜찮겠다는 생각이 들었다.

// type
type names = 'firstName' | 'lastName'

type NameTypes = {
  [key in names]: string
}

const a: NameTypes = { firstName: 'hyein', lastName: 'jeong' }

// interface
interface NameInterface {
  // error 발생
  [key in names]: string
}

4️⃣ 사용 가능한 타입

이건 당연한 이야기이긴 하지만,
interface는 객체 (object)의 타입 정의만 가능하다.

interface TempInterface extends string {
  // ❌ 불가능
}

반면 type은 객체(object) 외에도 Primitive Type, Tuple, Union 등의 타입을 정의할 수 있다.

type Name = string; // Primitive Type
type Age = number;
type Person = [string, number, boolean]; // Tuple
type NumberOrString = string | number; // Union

---

정리

정리해보자면 다음과 같다.

	interface	type
공통점	타입을 정의하기 위해 사용	타입을 정의하기 위해 사용
확장 방법	extends 이용	& 이용
선언적 확장 (같은 이름의 interface를 선언하면, 자동으로 확장되는지)	가능	불가능
computed value(계산된 값) 사용	불가능	가능
Object 외의 타입 (Primitive Type, Tuple, Union 등) 설정	불가능	가능