TypeScript 기본 다지기 Ⅲ

jinew·2025년 3월 10일

🍏 TypeScript

목록 보기
3/7
post-thumbnail

📌 인터페이스와 타입 별칭


타입스크립트에서 객체의 구조를 정의하는 방법에는 두 가지가 있는데, 바로 1) interface (인터페이스) 와 2) type (타입 별칭) 이다.
둘 다 비슷한 역할을 하지만 차이점이 있다고 하니 하나씩 알아보자!



1️⃣ 인터페이스 (interface)

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

const user: User = {
  name: "Alice",
  age: 25
};

✅ 인터페이스의 특징

  • 객체의 구조를 정의할 때 사용한다.
  • name, age 같은 속성의 타입을 강제한다.
  • 타입을 잘못 작성하면 컴파일 에러가 발생한다.

🚨 오류 : 속성이 빠지거나 타입이 다르면 발생

const wrongUser: User = {
  name: "Bob"
}; // ❌ 오류! age 속성이 없음

const anotherUser: User = {
  name: "Charlie",
  age: "30"
}; // ❌ 오류! age는 숫자여야 함

💭 만약 선택적으로 들어가는 속성을 만들고 싶다면?

: 인터페이스에서 선택적으로 들어갈 속성을 만들고 싶다면 ?를 사용하면 된다.

interface User {
  name: string;
  age?: number; // 선택적 속성
}

const user1: User = { name: "Alice" }; // ⭕ 가능
const user2: User = { name: "Bob", age: 30 }; // ⭕ 가능
  • ?가 붙은 age는 있어도 되고 없어도 되는 속성이 된다.

📖 읽기 전용 속성 (readonly)

: 인터페이스는 객체의 속성을 변경하지 못하도록 만들 수도 있는데, 이는 readonly를 사용하면 된다.

interface Car {
  readonly brand: string;
  model: string;
}

const myCar: Car = {
  brand: "Tesla",
  model: "Model 3"
};

myCar.model = "Model S"; // ⭕ 가능
myCar.brand = "BMW"; // ❌ 오류 발생 (brand는 readonly)

🔨 인터페이스 확장 (extends)

: 인터페이스는 다른 인터페이스를 확장할 수도 있다. 즉, 기존 인터페이스를 기반으로 새로운 인터페이스를 만들 수도 있다!

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};
  • DogAnimal의 속성을 자동으로 상속받게 된다!



2️⃣ 타입 별칭 (type)

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

const user: User = {
  name: "Alice",
  age: 25
};

: type도 객체의 타입을 정의할 수 있는데, 인터페이스와의 다른 점은 아래와 같다.

📌 typeinterface의 차이점

interfacetype
객체 타입 정의✅ 가능✅ 가능
확장 (extends)✅ 가능❌ 불가능 (대신 & 사용)
유니온 타입 사용❌ 불가능✅ 가능
기본 사용 추천객체 타입복잡한 타입 조합

🔗 type에서 &(교차 타입, 인터섹션) 사용

: typeinterface 처럼 extends를 쓸 수는 없지만, & 연산자를 사용해서 여러 타입을 합칠 수 있다.

type Person = {
  name: string;
};

type Employee = {
  company: string;
};

type Worker = Person & Employee;

const worker: Worker = {
  name: "Alice",
  company: "Google"
};
  • ✅ 결과: WorkerPersonmployee를 합친 타입이 된다.

📌 interface vs type 언제 사용해야 할까?

  • interface → 객체의 구조를 정의할 때 (extends로 확장 가능)
  • type → 유니온 타입이나 & 연산자로 여러 타입을 합칠 때

✅ 일반적으로는 interface를 추천한다고 한다!
하지만 상황에 따라 type이 더 유용할 수도 있으니 알아서.. 잘.. 네..^^




✅ 정리

  • 객체의 타입을 정의할 때 interfacetype을 사용할 수 있다.
  • 인터페이스(interface)는 extends를 사용해 확장이 가능하다.
  • 타입 별칭(type)은 & 연산자로 여러 타입을 합칠 수 있다.
  • 읽기 전용 속성(readonly)을 사용하면 값 변경을 막을 수 있다.
profile
멈추지만 않으면 도착해 🛫

0개의 댓글