타입스크립트 인터페이스 확장 예제

-

타입스크립트에서 extends를 사용하면 인터페이스를 확장할 수 있다.

예를 들어,
User 타입은 있을 때, 관리자 정보를 추가하고 싶거나, 공통 속성은 재사용 하면서 특정 화면에 필요한 속성만 더하고 싶을 때 인터페이스 확장을 위해 extends를 사용할 수 있다.

타입스크립트에서 extends는 기존 인터페이스의 멤버 데이터를 가져오고 새 멤버를 추가하는 방식이라 볼 수 있다.

-

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

interface AdminUser extends User {
  role: "admin";
}

-

const admin: AdminUser = {
  id: 1,
  name: "Kim",
  role: "admin",
};

-

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

interface AdminUser {
  id: number;
  name: string;
  role: "admin";
}

-

interface AdminUser extends User {
  role: "admin";
}

-

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

interface PaidUser extends User {
  membershipLevel: "basic" | "premium";
}

-

const user: PaidUser = {
  id: 100,
  name: "Lee",
  email: "lee@example.com",
  membershipLevel: "premium",
};

-

interface Product {
  id: number;
  name: string;
  price: number;
  description?: string;
}

interface DiscountProduct extends Product {
  discountRate: number;
}

-

const product: DiscountProduct = {
  id: 1,
  name: "Keyboard",
  price: 50000,
  discountRate: 10,
};

-

interface Timestamp {
  createdAt: string;
  updatedAt: string;
}

interface Author {
  authorId: number;
  authorName: string;
}

interface BlogPost extends Timestamp, Author {
  title: string;
  content: string;
}

-

const post: BlogPost = {
  createdAt: "2026-07-04",
  updatedAt: "2026-07-04",
  authorId: 1,
  authorName: "Park",
  title: "TypeScript Interface",
  content: "인터페이스 확장 예제입니다.",
};

-

interface ButtonProps {
  label: string;
  onClick: () => void;
}

interface IconButtonProps extends ButtonProps {
  icon: string;
}

-

const saveButton: IconButtonProps = {
  label: "저장",
  icon: "save",
  onClick: () => {
    console.log("저장 버튼 클릭");
  },
};

-