Ch.15 TypeScript 기초 — AI가 이해하는 타입

interface와 type — 객체의 설계도

interface로 객체의 형태를 정의할 수 있다type alias와 union/intersection 타입을 이해한다API 응답 타입을 정의하고 활용할 수 있다

AI에게 유저 데이터를 처리해달라고 하면?

AI에게 '유저 데이터 처리해줘'라고 하면 매번 필드명이 다릅니다. name인지 userName인지, age가 string인지 number인지 헷갈립니다.

객체의 형태를 미리 정해두면 어떨까?

interface와 type — 객체의 설계도를 만들어 AI도, 에디터도, 동료도 같은 형태를 공유합니다.

article

핵심 내용

interface = 객체의 설계도 어떤 필드가 있어야 하는지 미리 정합니다

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

// ✅ 올바른 사용
const user: User = {
  name: "김짓",
  age: 25,
  email: "kim@example.com",
};

// ❌ 에러! 'age' 누락
const bad: User = {
  name: "이코드",
  email: "lee@example.com",
};

// 선택적 속성 — ? 를 붙이면 없어도 됨
interface User {
  name: string;
  age: number;
  email?: string;  // 선택적!
}

// ✅ email 없어도 OK
const user: User = {
  name: "김짓",
  age: 25,
};

선택적 속성 `?`의 의미 `email?: string`은 `email: string | undefined`와 같습니다. API 응답에서 있을 수도, 없을 수도 있는 필드에 유용합니다.

type 키워드로도 타입을 정의합니다 union(|)과 intersection(&)이 핵심입니다

// Union type — 여러 타입 중 하나
type Status = "loading" | "success" | "error";
type ID = string | number;

let status: Status = "loading"; // ✅
status = "done"; // ❌ 에러! "done"은 Status에 없음

// Intersection type — 두 타입 합치기
type Name = { name: string };
type Age = { age: number };

type Person = Name & Age;
// { name: string; age: number }

const p: Person = {
  name: "김짓",
  age: 25,
};

API 응답에 타입을 정의하면 AI가 더 정확한 코드를 생성합니다

// API 응답 타입 정의
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

// 사용
async function fetchProducts(): Promise<ApiResponse<Product[]>> {
  const res = await fetch("/api/products");
  return res.json();
}

const result = await fetchProducts();
result.data[0].name; // ✅ 자동완성!

AI 프롬프트 팁 AI에게 코드를 요청할 때 interface를 함께 보내면 필드명·타입이 일치하는 정확한 코드를 받을 수 있습니다. 타입 = AI와의 계약서입니다.

interface와 type은 완전히 같은 기능을 제공한다.

`type Status = "loading" | "success" | "error"`에서 `status = "pending"`을 할당하면?

`email?: string`은 어떤 의미인가요?

AI에게 코드를 요청할 때 interface를 함께 보내면 더 정확한 결과를 얻을 수 있다.

key

핵심 용어

🤖

프롬프트에 타입 포함

AI에게 interface를 보여주면 정확한 코드 생성

⌨️

에디터 자동완성

타입이 있으면 . 찍는 순간 필드 목록 표시

🛡️

리팩토링 안전성

필드명 변경 시 모든 사용처에서 에러 표시

compare_arrows

비교 정리

항목	interface	type
객체 형태	✅ 가능	✅ 가능
union / intersection	❌ 불가	✅ \| 와 &
확장 (extends)	✅ extends	✅ & 교차

edit_note

정리 노트

interface와 type — 객체의 설계도

핵심 개념

interface: 객체의 구조(형태)를 정의하는 설계도
type alias: 타입에 이름을 붙이는 방법 — union, 원시 타입도 가능
union 타입: A | B — 여러 타입 중 하나를 허용
선택적 속성: ? 를 붙이면 있어도 되고 없어도 되는 속성

★

AI에게 interface를 함께 보내면 더 정확한 코드를 생성합니다.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작