Typescript 완벽 가이드｜기초부터 실전까지 한 번에 정리 - 5강

네, 5강에 오신 것을 환영합니다! 🖐️

많은 분들이 타입스크립트를 공부할 때 "도대체 interface랑 type이랑 뭐가 다른 거야?" 하고 가장 많이 헷갈려 하십니다. 사실 기능적으로는 90% 비슷하거든요.

하지만 미묘한 차이를 알면 상황에 딱 맞는 도구를 골라 쓸 수 있습니다. 오늘 이 논란을 아주 깔끔하게 종결시켜 드릴게요!

---

🚀 제5강. 객체를 정의하는 법 2 - 타입 별칭(Type Alias) vs 인터페이스

1. 타입 별칭(Type Alias): "너의 이름은..."

인터페이스가 **'정식 계약서'**라면, 타입 별칭(type)은 데이터에 **'별명(닉네임)'**을 붙여주는 것과 같습니다.

① 기본 사용법 type 키워드를 쓰고 = (등호)를 사용합니다. (변수 만드는 거랑 비슷하죠?)

TypeScript

 

// 인터페이스랑 거의 똑같아 보이죠?
type User = {
  name: string;
  age: number;
};

const kim: User = { name: "김코딩", age: 25 };

② 타입 별칭만 할 수 있는 것 (강력한 기능!) 인터페이스는 오직 '객체' 모양만 정의할 수 있지만, type은 모든 데이터에 별명을 붙일 수 있습니다.

TypeScript

 

// 1. 기본 타입에 별명 붙이기 (ID는 문자열이야!)
type ID = string;

// 2. 여러 타입을 묶기 (Union Type - 6강 예고!)
type Status = "success" | "error" | "loading";

const myId: ID = "user_123";
const currentStatus: Status = "success"; 

핵심: 단순한 데이터나, 여러 타입을 조합할 때는 type이 훨씬 편합니다.

2. 결정적 차이: "확장하는 방법"

이 부분이 면접 질문으로도 자주 나옵니다. "기존에 만든 것에 내용을 더 추가하고 싶을 때" 어떻게 할까요?

① 인터페이스: 상속(extends) 객체 지향 프로그래밍 느낌으로 extends를 써서 내용을 물려받습니다.

TypeScript

 

interface Animal {
  name: string;
}

// Animal을 상속받아 size를 추가!
interface Bear extends Animal {
  size: number;
}

// 결과: { name: string; size: number }

② 타입 별칭: 교차(& - Intersection) 두 가지 타입을 **'합친다'**는 느낌으로 & 기호를 씁니다.

TypeScript

 

type Animal = {
  name: string;
}

// Animal과 size를 합침!
type Bear = Animal & {
  size: number;
}

3. 실무 가이드: 그래서 뭘 써야 하나요?

이게 제일 중요하죠. 정답은 없지만, **실무 국룰(Convention)**은 있습니다.

1. 객체(Object) 데이터를 정의할 때: 주로 **interface**를 씁니다. (확장이 편하고 에러 메시지가 좀 더 깔끔합니다.)
   • 예: React 컴포넌트의 Props, API 응답 데이터 등
2. 단순 타입, 유니온 타입, 튜플 등을 정의할 때: **type**을 씁니다.
   • 예: type ID = string | number;
3. 가장 중요한 원칙: 팀의 규칙을 따르세요! (팀에서 type만 쓰기로 했으면 type만 씁니다. 일관성이 생명입니다.)

선생님의 추천: 시작은 **interface**로 하세요. 그러다 "어? 인터페이스로는 표현이 안 되네?" 싶을 때(예: string | number) **type**으로 넘어가면 됩니다.

---

✍️ 5강 미니 퀴즈 & 실습

개념 정리를 위해 문제를 풀어볼까요?

문제 1. (코드 변환) 다음 인터페이스 코드를 type 별칭 문법으로 바꿔보세요.

TypeScript

 

// [Before] Interface
interface Point {
  x: number;
  y: number;
}

TypeScript

 

// [After] Type Alias
// 여기에 코드를 적어보세요

문제 2. (선택) 다음 중 interface로는 만들 수 없는 타입 정의는 무엇일까요?

1. { name: string; age: number } (객체)
2. string | number (문자열이거나 숫자 - 유니온 타입)
3. { readonly id: number } (읽기 전용 속성)

---

✅ 정답 및 해설

• 문제 1 정답:
  • 해설: interface 대신 type을 쓰고, 이름 뒤에 **= (등호)**를 붙여주면 끝입니다!
• TypeScript

   

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

• 문제 2 정답: 2번
  • 해설: interface는 객체의 모양을 정의하는 설계도입니다. "A 아니면 B" 같은 **유니온 타입(|)**은 오직 **type**으로만 정의할 수 있습니다. 이것이 type이 필요한 결정적인 이유입니다.

---

고생하셨습니다! 👏 이제 interface와 type의 차이를 알았으니, 상황에 맞춰 골라 쓰는 센스를 갖추게 되셨습니다. Part 1 기초 체력 다지기가 거의 끝나가네요!

다음 6강에서는 방금 살짝 맛본, **"이거 아니면 저거?"**를 다루는 **유니온 타입(|)**과 **인터섹션 타입(&)**을 제대로 배워보겠습니다. 실무에서 정말 많이 쓰이는 **'유연한 코드'**의 핵심입니다.