interface, type 둘 중에 뭘 써야 할까?

✨type

• 모든 종류의 타입을 정의할 수 있는 키워드
• 숫자, 문자열, 객체, 배열 등 다양한 타입을 선언할 수 있음

type Person = {
  name: string;
  age: number;
  isStudent: boolean;
};

let person: Person = {
  name: 'bori',
  age: 15,
  isStudent: true
};

✨interface

• 객체의 타입을 정의할 때
• 객체의 구조와 속성을 정의할 수 있음

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

let person: Person = {
  name: 'bori',
  age: 15,
  isStudent: true
};

코드만 봤을 때, 둘의 별 차이가 없어보인다. 둘의 확연한 차이가 무엇일까?

✨타입스크립트 type과 interface의 차이

📍확장성

• type: 새로운 속성을 추가하려면 동일한 이름의 type을 다시 선언해야 한다. (인터섹션 타입(&)을 사용하여 결합)
• interface: 동일한 이름의 interface를 선언하면 자동으로 병합되어 확장된다. ( extends 키워드를 사용해 확장 )

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  employeeId: number;
};

const employee: Employee = {
  name: 'bori',
  age: 30,
  employeeId: 1234,
};

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

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: 'bori',
  age: 30,
  employeeId: 1234,
};

// 인터페이스 병합 예시
interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: 'bori',
  age: 30,
};

// 타입은 병합 불가
type Person = {
  name: string;
};

type Person = {
  age: number; // 오류 발생: 동일한 이름으로 다시 선언할 수 없음
};

📍유니온

• type: 유니온 타입을 만들 수 있다.
• interface: 유니온 타입을 만들 수 없다.

// type을 사용한 유니온 타입
type Color = 'red' | 'green' | 'blue';

📍타입 정의

• type: 모든 종류의 타입을 정의할 수 있다.
• interface: 객체 타입만 정의할 수 있다.

// type으로 다양한 타입 정의
type Age = number;
type Name = string;
type Person = { name: Name, age: Age };
type Tuple = [string, number];
type Union = string | number;

// interface는 객체 타입만 정의 가능
interface User {
  name: string;
  age: number;
}

그럼 개발할 때, type과 interface 뭘 써야할까?

 

사실 난 type이 더 좋다. 커서를 올렸을 때, type을 쓰면 무슨 타입이 써있는지 한 눈에 볼 수 있어서 좋다.... 하지만, 멘토님은 interface와 type을 섞어 쓴다고 하셨다. 그럼 언제 어느상황에 무엇을 써야할까?

1. 객체의 형태를 정의할 때

interface: 객체의 형태를 정의하는 데 주로 사용한다. (특히, 확장이나 구현이 필요한 경우)

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

interface Admin extends User {
  role: string;
}

2. 복잡한 타입 조합이 필요할 때

type: 유니온 타입, 튜플, 교차 타입, 매핑된 타입 등 복잡한 타입 조합이 필요할 때 사용한다.

type ID = number | string;

type Point = {
  x: number;
  y: number;
};

type Shape = Point & {
  radius: number;
};

3. 함수 시그니처를 정의할 때

interface와 type 모두 가능하지만, type이 더 간결할 수 있다.

type Add = (a: number, b: number) => number;

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

4. 제네릭 타입을 사용할 때

interface와 type 모두 가능하지만, type이 더 간결할 수 있다. ( 다양한 타입 조합의 가능성 때문 )

type Response<T> = {
  data: T;
  error: string | null;
};

interface IResponse<T> {
  data: T;
  error: string | null;
}

5. 라이브러리 타입 정의 시

interface: 주로 라이브러리나 외부 모듈의 타입 정의에 사용된다. 여러 타입 정의가 병합될 수 있기 때문에 유지보수가 쉽다.

// 라이브러리의 타입 정의 파일
interface Window {
  myCustomProperty: string;
}

6. 타입 별칭을 사용할 때

type: 특정 타입에 대한 별칭을 정의할 때 유용하다.

type StringOrNumber = string | number;
type Callback = () => void;

interface는 주로 확장성과 구조적인 정의에, type은 더 복잡한 타입 변환과 간결한 정의에 유리하다.
-> 사바사에 맞춰 적절한 것을 쓰자.

근데 난 type 쓸래