타입스크립트의 타입과 인터페이스의 차이점

규갓 God Gyu·2024년 12월 23일

면접질문

목록 보기
33/142

interface는 객체의 형태를 확장하는데 용이,
type은 튜플, 인터섹션, 유니온 등을 이용하여 더 복잡한 타입 정의 및 조합을 표현하는데 용이

튜플
고정된 길이와 타입을 가지는 배열
ex- [string,number]타입의 첫번째 요소는 string, 두번째 요소는 number이여야 함

인터섹션
하나의 타입이 여러 가지 타입 중 하나일 수 있음을 나타냄
ex - let value: string | number;
value = 'he' // ok
value = 42 // ok
value = true // Error

유니온
여러 타입을 결합하여 동시에 모두 만족해야 함
ex - type A = {name:string};
type B = {age: number;
type AB = A&B;
const person: AB = {name:"John", age:30}; // ok

interface는 선언 병합을 지원해 여러 번 선언할 수 있어, 주로 객체 타입을 확장할 때 유리,
동일한 이름을 가진 interface를 여러번 선언 시, 이 속성들은 자동으로 합쳐짐

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

interface Person {
  address: string;
}

const person1: Person = {
  age: 1,
  name: "abcd",
  isBirthday: false,
  address: "1010",
};

여러번 선언했어도 하나의 interface로 병합됨

반면

type으로 선언 시 동일한 이름으로 중복 선언 에러가 발생됨

대신

튜플 같이 복잡한 타입 표현, 복잡한 타입 조합이 가능함

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

type ContactInfo = {
  email: string;
  phone: string;
};

// 인터섹션 타입 (&)을 사용해 두 타입을 결합하여 하나의 타입으로 생성
type PersonInfo = BasicInfo & ContactInfo;

const person2: PersonInfo = {
  name: "John",
  age: 30,
  email: "john@example.com",
  phone: "123-456-7890",
};

최종적으로
interface는 선언 병합으로 여러번 선언 가능, 객체 타입 확장

type은 튜플 등 복잡한 타입을 사용하고 유연한 연산자로 복잡한 타입 조합을 표현하는데 적합

profile
웹 개발자 되고 시포용

0개의 댓글