Utility Types

TypeScript Utily types 4가지 정리

• Partial<Type>
  
  
• Required<Type>
  
  
• Pick<Type, Keys>
  
  
• Omit<Type, Keys>

 

 

 

 

 

 

Omit <Type, Keys>

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: 'sm' | 'md' | 'lg';
  variant?: 'fill' | 'outline' | 'ghost';
  ellipse?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  colorScheme?: 'white' | 'point';
}

export interface IconButtonProps
  extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'children'> {
  icon?: ReactNode;
}

만들어둔 Button 컴포넌트에서 key를 가져와 아이콘만 들어가는 IconButton 컴포넌트를 만들기 위해 사용,
가져오지 않으려는 key속성은 Omit의 두번째 인자에 '|' 표시로 구분하여 제거 할 수 있다.

---

참조: https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys