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

좋습니다! 핵심 중의 핵심, 4강에 오신 것을 환영합니다. 🎉 지금까지는 숫자 하나, 문자 하나 같은 단순한 데이터를 다뤘죠? 하지만 실무에서는 "이름은 철수고, 나이는 30살이고, 기술스택은 React인 개발자" 처럼 여러 정보가 뭉쳐진 **객체(Object)**를 다룰 일이 99%입니다.

이 객체의 모양을 아주 예쁘고 엄격하게 정의하는 방법, 바로 **인터페이스(Interface)**입니다.

---

🚀 제4강. 객체를 정의하는 법 1 - 인터페이스 (Interface)

1. 개념 쏙쏙: "객체의 설명서(Specification)"

인터페이스는 "이 객체는 이렇게 생겨야만 해!" 라고 정해두는 설명서이자 계약서입니다.

💡 비유:

• 객체(Object): 실제 만들어진 '붕어빵'
• 인터페이스(Interface): 붕어빵을 찍어내는 '붕어빵 틀' (또는 설계도)

설계도에 "꼬리는 3cm"라고 적혀있는데, 꼬리가 없는 붕어빵을 만들면 불량이겠죠? 타입스크립트는 이 설계도를 보고 불량품을 걸러냅니다.

2. 코드 사용법 (따라해보세요!)

interface 키워드를 쓰고 이름을 붙인 뒤(보통 대문자로 시작), 필요한 속성들의 타입을 적어줍니다.

TypeScript

 

// 1. 설계도(인터페이스) 만들기
interface User {
  name: string;
  age: number;
  isDeveloper: boolean;
}

// 2. 실제 객체 만들기 (설계도 적용)
// 변수명 뒤에 ': User'라고 적어서, "이 변수는 User 설계도를 따릅니다"라고 선언합니다.
const member1: User = {
  name: "김코딩",
  age: 28,
  isDeveloper: true
};

// 🚨 에러 상황
const member2: User = {
  name: "이철수",
  age: 30
  // 앗! isDeveloper가 빠졌네요. 
  // 에러: 'isDeveloper' 속성이 'User' 형식에 없지만 필수입니다.
};

3. 실무 꿀팁: 옵션과 읽기 전용

실무에서는 모든 속성이 다 필수인 건 아닙니다. 그리고 절대 수정하면 안 되는 값도 있죠.

• 선택적 속성 (?): "있어도 되고 없어도 돼" (3강에서 배운 것과 같아요!)
• 읽기 전용 (readonly): "처음에 만들 때만 넣고, 나중엔 절대 수정 불가!" (주민번호, ID 같은 것)

TypeScript

 

interface Car {
  readonly id: number; // 자동차 고유 번호 (수정 불가)
  model: string;       // 모델명
  color?: string;      // 색상 (없을 수도 있음)
}

const myCar: Car = {
  id: 12345,
  model: "Tesla"
  // color는 없어도 에러 안 남! (?) 덕분이죠.
};

// myCar.id = 99999; // 🚨 에러! readonly라 수정할 수 없습니다.
myCar.model = "Ionic"; // 이건 수정 가능!

4. React에서의 활용 미리보기

나중에 우리가 만들 게시판의 게시글 데이터를 이렇게 정의하게 됩니다. 벌써 실무 느낌이 나죠?

TypeScript

 

interface Post {
  id: number;
  title: string;
  content: string;
  author?: string; // 작성자는 익명일 수도 있으니 선택값으로!
}

---

✍️ 4강 미니 퀴즈 & 실습

인터페이스, 이제 감이 좀 오시나요? 간단한 퀴즈로 확인해 봅시다.

문제 1. (코드 작성) 다음 요구사항에 맞는 Pizza 인터페이스를 작성해 보세요.

• name은 문자열이고 필수입니다.
• price는 숫자이고 필수입니다.
• topping은 문자열 배열(string[])이고, 있어도 되고 없어도 됩니다.

TypeScript

 

interface Pizza {
  // 여기에 코드를 적어보세요
}

문제 2. (OX 퀴즈) readonly가 붙은 속성은 객체가 만들어진 이후에도 마음대로 값을 바꿀 수 있다. (O / X)

---

✅ 정답 및 해설

• 문제 1 정답:
  • 해설: 선택 사항이므로 속성명 뒤에 ?를 붙여야 하고, 여러 개의 토핑이 들어갈 수 있으니 문자열 배열 string[]을 사용하면 완벽합니다.
• TypeScript

   

  interface Pizza {
    name: string;
    price: number;
    topping?: string[]; // 핵심! 물음표(?)와 배열([])을 잘 썼나요?
  }
  

• 문제 2 정답: X
  • 해설: readonly는 '읽기 전용'입니다. 처음에 값을 할당할 때 외에는 절대 수정할 수 없습니다. 데이터가 꼬이는 걸 방지하는 아주 좋은 기능이죠.

---

고생 많으셨습니다! 👏 이제 여러분은 **"데이터의 설계도"**를 그릴 줄 아는 개발자가 되었습니다.

그런데 타입스크립트 코드를 보다 보면 interface 말고 type이라는 것으로 똑같이 만드는 걸 볼 수 있을 거예요. "어? 둘 다 비슷한 것 같은데 도대체 뭘 써야 하지?" 🤯 혼란스러우시죠?

다음 5강에서는 '타입 별칭(Type Alias) vs 인터페이스', 이 영원한 난제를 아주 깔끔하게 정리해 드립니다. 이것만 알면 기본기는 졸업입니다!