고급 타입 패턴과 Best Practices

import React from 'react';

// 공통 Props 인터페이스
interface BaseButtonProps {
  children: React.ReactNode;
  className?: string;
  disabled?: boolean;
}

// <a> 태그에 필요한 Props
interface AnchorButtonProps extends BaseButtonProps {
  href: string;
  onClick?: never; // href가 있으면 onClick은 허용하지 않음
}

// <button> 태그에 필요한 Props
interface HtmlButtonProps extends BaseButtonProps {
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
  href?: never; // onClick이 있으면 href는 허용하지 않음
}

// 유니온으로 최종 ButtonProps 정의
// 선택적 never로 href와 onClick의 동시 전달을 금지
type ButtonProps = AnchorButtonProps | HtmlButtonProps;

const ConditionalButton: React.FC<ButtonProps> = ({ children, className, disabled, href, onClick }) => {
  if (href) {
    // href가 제공되면 <a> 태그로 렌더링
    return (
      <a href={href} className={className} style={disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}}>
        {children}
      </a>
    );
  } else {
    // onClick이 제공되거나 href가 없으면 <button> 태그로 렌더링
    return (
      <button
        onClick={onClick as (event: React.MouseEvent<HTMLButtonElement>) => void} // onClick이 반드시 있을 때만 여기로 오도록 타입 단언
        className={className}
        disabled={disabled}
      >
        {children}
      </button>
    );
  }
};

export default ConditionalButton;

// 사용 예시
const AppWithConditionalButton: React.FC = () => {
  const handleClick = () => alert('Button Clicked!');

  return (
    <div>
      <h3>Conditional Button Examples</h3>
      {/* <a> 태그로 렌더링됨 */}
      <ConditionalButton href="https://google.com" className="link-btn">
        Go to Google
      </ConditionalButton>

      {/* <button> 태그로 렌더링됨 */}
      <ConditionalButton onClick={handleClick} className="html-btn">
        Click Me
      </ConditionalButton>

      {/*
      // 컴파일 에러: href와 onClick을 동시에 제공
      <ConditionalButton href="/home" onClick={handleClick}>
        Error Button
      </ConditionalButton>
      // Type '{ children: string; href: string; onClick: () => void; }'
      // is not assignable to type 'ButtonProps'.
      // Type '{ children: string; href: string; onClick: () => void; }'
      // is not assignable to type 'AnchorButtonProps'.
      // Types of property 'onClick' are incompatible.
      // Type '() => void' is not assignable to type 'undefined'.

      // 컴파일 에러: 유니온의 두 경우 모두 href 또는 onClick을 요구함
      // 이 예제의 HtmlButtonProps는 onClick을 필수로 선언함
      // 또는 href?: string; onClick?: () => void; 로 하고 둘 다 없어도 허용할지 결정
      // 여기서는 onClick/href 중 하나는 필수라는 가정을 위해 위와 같이 정의함
      */}
    </div>
  );
};

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

// Product의 모든 속성을 선택적으로 만듭니다.
type PartialProduct = Partial<Product>;

const updateProduct = (productId: number, changes: PartialProduct) => {
  // ... 제품 업데이트 로직 (부분 업데이트 가능)
  console.log(`Updating product ${productId} with changes:`, changes);
};

// 사용 예시
updateProduct(1, { price: 1250 }); // name이나 category 없이 price만 변경 가능
updateProduct(2, { name: 'Wireless Keyboard', category: 'Accessories' });
// updateProduct(3, { id: 3 }); // id는 Product에서만 필요하고 PartialProduct에서는 optional이다.

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

function updateAllowedProduct(productId: number, changes: ProductPatch) {
  console.log(`Updating product ${productId} with changes:`, changes);
}

updateAllowedProduct(1, { price: 1250 });
// updateAllowedProduct(1, { id: 2 }); // 새 객체 리터럴의 id는 계약에 없음

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

// UserProfile에서 'name'과 'email'만 선택
type UserContactInfo = Pick<UserProfile, 'name' | 'email'>;

interface ContactCardProps {
  user: UserContactInfo;
}

const ContactCard: React.FC<ContactCardProps> = ({ user }) => {
  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'
};

// currentUser를 그대로 전달할 수 있습니다. 타입스크립트가 자동으로 Pick된 타입을 만족하는지 검사합니다.
<ContactCard user={currentUser} />;

// 혹은 명시적으로 Pick된 타입을 생성하여 전달할 수도 있습니다.
const pickedUser: UserContactInfo = { name: currentUser.name, email: currentUser.email };
<ContactCard user={pickedUser} />;

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

// Post에서 'id'와 'createdAt'을 제외한 타입을 생성합니다.
type EditablePost = Omit<Post, 'id' | 'createdAt' | 'authorId'>;

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

const PostEditor: React.FC<PostEditorProps> = ({ initialPost, onSave }) => {
  const [title, setTitle] = useState(initialPost?.title || '');
  const [content, setContent] = useState(initialPost?.content || '');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onSave({ title, content }); // 저장 시 ID나 생성일시는 포함되지 않습니다.
  };

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

import React from 'react';

interface Item {
  id: string | number;
  [key: string]: any; // 다른 속성들도 허용
}

interface GenericListProps<T extends Item> { // T는 Item 타입을 확장해야 함
  items: T[];
  // 각 아이템을 렌더링하는 함수 (렌더 Props 패턴과 유사)
  renderItem: (item: T) => React.ReactNode;
  // 각 아이템의 고유 키를 반환하는 함수 (선택적)
  getKey?: (item: T) => React.Key;
}

// 제네릭 함수형 컴포넌트 정의
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>
  );
}

export default GenericList;

// 사용 예시
interface User {
  id: number;
  name: string;
  age: number;
}

interface Product {
  id: string;
  productName: string;
  price: number;
}

const AppWithGenericList: React.FC = () => {
  const users: User[] = [
    { id: 1, name: 'Alice', age: 30 },
    { id: 2, name: 'Bob', age: 24 },
  ];

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

  return (
    <div>
      <h3>User List:</h3>
      <GenericList
        items={users}
        renderItem={(user) => (
          <div>
            <strong>{user.name}</strong> ({user.age} years old)
          </div>
        )}
        getKey={(user) => user.id} // 숫자 id도 React.Key로 사용 가능
      />

      <h3>Product List:</h3>
      <GenericList
        items={products}
        renderItem={(product) => (
          <div>
            {product.productName} - ${product.price}
          </div>
        )}
        // getKey는 생략해도 id 속성이 있기 때문에 기본적으로 item.id를 키로 사용
      />
    </div>
  );
};

import React from 'react';

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

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

type Content = TextContent | ImageContent;

// 타입 가드 함수
function isImageContent(content: Content): content is ImageContent {
  return content.type === 'image';
}

interface ContentDisplayProps {
  content: Content;
}

const ContentDisplay: React.FC<ContentDisplayProps> = ({ content }) => {
  if (isImageContent(content)) {
    // 이 블록 안에서 content는 ImageContent 타입으로 자동 추론됩니다.
    return <img src={content.src} alt={content.alt} style={{ maxWidth: '100%', height: 'auto' }} />;
  } else {
    // 이 블록 안에서 content는 TextContent 타입으로 자동 추론됩니다.
    return <p>{content.value}</p>;
  }
};

// 사용 예시
const AppWithContentDisplay: React.FC = () => {
  const textItem: TextContent = { type: 'text', value: 'This is a text content.' };
  const imageItem: ImageContent = {
    type: 'image',
    src: '/docs/common/fallback-image.svg',
    alt: 'Sample Image'
  };

  return (
    <div>
      <h3>Content Display Examples</h3>
      <ContentDisplay content={textItem} />
      <ContentDisplay content={imageItem} />
    </div>
  );
};

export default AppWithContentDisplay;

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;
}

// tsconfig.json: "strict": true 기준
type UserLoadState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; users: Array<{ id: number; name: string }> }
  | { status: 'error'; message: string };

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

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); // 새 상태를 추가했는데 분기 누락 시 컴파일 에러 유도
  }
}

// tsconfig.json: "strict": true 기준
type RouteConfig = {
  path: `/${string}`;
  auth: 'public' | 'private';
};

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

type RouteKey = keyof typeof routes; // "home" | "dashboard" | "settings"

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