타입스크립트 TS interface와 type의 특징과 차이점

interface

1. 정의가능 타입

객체, 클래스의 타입

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

2. 상속, 확장 방식

extends 키워드로 확장, 선언 병합

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

// Person 인터페이스를 확장한 Employee 인터페이스
interface Employee extends Person {
  jobTitle: string;
  salary: number;
}

const employee: Employee = {
  name: "Alice",
  age: 30,
   address: 'seoul',
  jobTitle: "Software Engineer",
  salary: 60000,
};

type (타입 별칭)

정의가능 타입
객체, 클래스 외에도 기본 타입, 유니언 타입, 인터섹션 타입, 유틸리티 타입, 맵드 타입 등의 정의에 사용

// 1. 객체타입
type Person = {
  name: string;
  age: numbr;
};

type Employee = {
  jobTitle: string;
  salary: number;
};

// 2. 유니언타입 | 
type Color = "red" | "green" | "blue";

// 3. 인터섹션 타입 &
type PersonEmployee = Person & Employee;

//4. 유틸리티 타입 (ex Partial, Pick, Omit)
type JustName = Pick<Person, "name">;

//5. 맵드 타입 [a in b] 
type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const person: Person = { name: "Bob", age: 25, address: "123 Main St" };

2. 상속, 확장 방식

& 연산자로 확장, 두번 선언 불가능

  type Todo = {
    title: string;
    content: string;
  };

  type TodoInfo = Todo & {
    _id: number;
    done: boolean;
  };

  var todo1: Todo = {
    title: '할일 1',
    content: '등록할 때 사용.'
  };

---

interface와 type (타입 별칭)의 차이점

1. 정의할 수 있는 타입 종류

interface : 객체, 클래스 정의에 사용
type : 객체, 클래스 외에도 기본 타입, 유니언 타입, 인터섹션 타입, 유틸리티 타입, 맵드 타입 등의 정의에 사용

2. 상속, 확장 방식

interface : extends 키워드로 확장, 선언 병합
type : & 연산자로 확장, 두번 선언 불가능

3. 확장가능성

interface가 type 보다 확장 가능성이 높음

---

결론적으로 성능상 interface를 사용하고 객체가 아닌 타입 별칭으로만 정의할 수 있는 경우에만 type을 사용을 권장한다.

하지만 타입은 인터페이스의 거의 모든 기능을 커버한다 그러므로 경우에 따라서 선택하여 사용해야 한다. 가급적 프로젝트내에서 컨벤션을 맞추고 일관된 기준에 따라 선택해야 한다.