고급 타입 패턴과 Best Practices

import type { MouseEventHandler, ReactNode } from "react";

interface BaseButtonProps {
  children: ReactNode;
  className?: string;
  disabled?: boolean;
}

interface AnchorButtonProps extends BaseButtonProps {
  href: string;
  onClick?: never;
}

interface HtmlButtonProps extends BaseButtonProps {
  onClick: MouseEventHandler<HTMLButtonElement>;
  href?: never;
}

type ButtonProps = AnchorButtonProps | HtmlButtonProps;

export default function ConditionalButton(props: ButtonProps) {
  const { children, className, disabled } = props;

  if (props.href !== undefined) {
    return disabled ? (
      <a className={className} aria-disabled="true">
        {children}
      </a>
    ) : (
      <a href={props.href} className={className}>
        {children}
      </a>
    );
  }

  return (
    <button type="button" onClick={props.onClick} className={className} disabled={disabled}>
      {children}
    </button>
  );
}

export interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

type ProductPatch = Partial<Pick<Product, "name" | "price" | "category">>;

export function describeUpdate(productId: number, changes: ProductPatch): string {
  return `product ${productId}: ${Object.keys(changes).join(",")}`;
}

console.log(describeUpdate(1, { price: 1250 }));
console.log(describeUpdate(2, { name: "Wireless Keyboard", category: "Accessories" }));

product 1: price
product 2: name,category

interface UserProfile {
  id: number;
  name: string;
  email: string;
  address: string;
  phone: string;
}

type UserContactInfo = Pick<UserProfile, "name" | "email">;

function ContactCard({ user }: { user: UserContactInfo }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

const currentUser: UserProfile = {
  id: 1,
  name: "John Doe",
  email: "[email protected]",
  address: "123 Main St",
  phone: "555-1234",
};

export default function ContactCards() {
  const picked: UserContactInfo = { name: currentUser.name, email: currentUser.email };
  return (
    <>
      <ContactCard user={currentUser} />
      <ContactCard user={picked} />
    </>
  );
}

import { useState } from "react";
import type { FormEvent } from "react";

interface Post {
  id: number;
  title: string;
  content: string;
  authorId: number;
  createdAt: Date;
}

type EditablePost = Omit<Post, "id" | "createdAt" | "authorId">;

interface PostEditorProps {
  initialPost?: EditablePost;
  onSave: (post: EditablePost) => void;
}

export default function PostEditor({ initialPost, onSave }: PostEditorProps) {
  const [title, setTitle] = useState(initialPost?.title ?? "");
  const [content, setContent] = useState(initialPost?.content ?? "");

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSave({ title, content });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
      <textarea value={content} onChange={(e) => setContent(e.target.value)} placeholder="Content" />
      <button type="submit">Save Post</button>
    </form>
  );
}

import type { Key, ReactNode } from "react";

interface Item {
  id: string | number;
}

interface GenericListProps<T extends Item> {
  items: readonly T[];
  renderItem: (item: T) => ReactNode;
  getKey?: (item: T) => Key;
}

export default function GenericList<T extends Item>({ items, renderItem, getKey }: GenericListProps<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={getKey ? getKey(item) : item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

import GenericList from "./GenericList";

const users = [
  { id: 1, name: "Alice", age: 30 },
  { id: 2, name: "Bob", age: 24 },
];

const products = [
  { id: "p1", productName: "Laptop", price: 1200 },
  { id: "p2", productName: "Mouse", price: 25 },
];

export default function ListExamples() {
  return (
    <>
      <GenericList items={users} renderItem={(user) => `${user.name} (${user.age} years old)`} />
      <GenericList items={products} renderItem={(product) => `${product.productName} - $${product.price}`} />
    </>
  );
}

interface TextContent {
  type: "text";
  value: string;
}

interface ImageContent {
  type: "image";
  src: string;
  alt: string;
}

export type Content = TextContent | ImageContent;

function isImageContent(content: Content): content is ImageContent {
  return content.type === "image";
}

export default function ContentDisplay({ content }: { content: Content }) {
  if (isImageContent(content)) {
    return <img src={content.src} alt={content.alt} />;
  }
  return <p>{content.value}</p>;
}

import type { Content } from "./components/ContentDisplay";

export function isContent(value: unknown): value is Content {
  if (typeof value !== "object" || value === null || Array.isArray(value)) {
    return false;
  }
  const record = value as Record<string, unknown>;
  if (record.type === "text") {
    return typeof record.value === "string";
  }
  if (record.type === "image") {
    return typeof record.src === "string" && typeof record.alt === "string";
  }
  return false;
}

console.log(isContent(null), isContent({ type: "text", value: "hello" }), isContent({ type: "image", src: 42, alt: "사진" }));

false true false

type UserLoadState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; users: { id: number; name: string }[] }
  | { status: "error"; message: string };

function assertNever(value: never): never {
  throw new Error(`Unhandled state: ${JSON.stringify(value)}`);
}

export function renderState(state: UserLoadState): string {
  switch (state.status) {
    case "idle":
      return "사용자 조회 전";
    case "loading":
      return "불러오는 중...";
    case "success":
      return `사용자 ${state.users.length}명`;
    case "error":
      return `오류: ${state.message}`;
    default:
      return assertNever(state);
  }
}

console.log(renderState({ status: "success", users: [] }));
console.log(renderState({ status: "error", message: "timeout" }));

사용자 0명
오류: timeout

type RouteConfig = {
  path: `/${string}`;
  auth: "public" | "private";
};

export const routes = {
  home: { path: "/", auth: "public" },
  dashboard: { path: "/dashboard", auth: "private" },
  settings: { path: "/settings", auth: "private" },
} as const satisfies Record<string, RouteConfig>;

export type RouteKey = keyof typeof routes;

export function getRoutePath(key: RouteKey): string {
  return routes[key].path;
}

console.log(getRoutePath("dashboard"));

/dashboard

<ConditionalButton href="/home">Home</ConditionalButton>
<ConditionalButton href="/home" onClick={() => {}}>Both</ConditionalButton>
<ConditionalButton onClick={() => {}} disabled>Off</ConditionalButton>