React TypeSciprt - Community Project

Interface Extends

중복되는 타입이 있을 경우 사용했다.

export interface GetResponse {
  responseMessage?: string;
  statusCode?: number;
}

export interface UserMainInfo extends GetResponse {
  cityName: string;
  findLatestBoardCommentsByUserDtos?: CommentType[];
  findLatestBoardsByUserDtos?: BoardType[];
  nickname: string;
  point: number;
  profileImg: string | undefined;
  userId: string;
  zoneName: string;
}

export interface BoardDetailType extends GetResponse, BoardType {
  content: string;
  deadlineAt: string | null;
  userId: string;
  viewCnt: number;
  isLiked: boolean;
  preBoardId: number;
  preBoardTitle: string;
  nextBoardId: number;
  nextBoardTitle: string;
}

연산자 정의 타입

유니온 타입(Union Type)

A or B이다 라는 의미의 타입입니다.

인터섹션 타입(Intersection Type)

A and B 모두 만족하는 하나의 타입을 의미합니다.

  // |
  deadlineAt: string | null;
  // &
  { id, content, interval, type }:ToastType & { interval: number }
  // TypeGuard
  if ('boardCommentId' in content) {
      use boardCommentId in content
    }

  if ('replyCommentId' in content && boardCommentId) {
	  use replyCommentId in content 
  }

TypeGuard

별도의 타입 가드를 이용하여 타입의 범위를 좁히지 않는 이상 기본적으로는 Person과 Developer 두 타입에 공통적으로 들어있는 속성인 name만 접근할 수 있게 됩니다.

Optional Type

타입을 선언했지만 선택적으로 사용한다는 것을 의미합니다.

export interface GetResponse {
  responseMessage?: string;
  statusCode?: number;
}

Type Assertion

변수 선언 시 값, 타입이 지정되지 않았지만 개발자는 타입을 알고 있을 때 타입을 단언해줍니다.

// as
const quillRef = useRef(null) as RefObject<ReactQuill>;

Omit

첫 번째 인자인 타입에서 두 번째 인자 타입을 제거한다.

// Omit<UseControllerProps<T>, 'defaultValue' | 'name'>
interface FormInputProps<T extends FieldValues>
  extends Omit<UseControllerProps<T>, 'defaultValue' | 'name'>,
    InputHTMLAttributes<HTMLInputElement> {
  id: string;
  label: string;
  value?: string;
  readOnly?: boolean;
  errors?: FieldErrors;
  rules?: RegisterOptions;
  register?: UseFormRegister<FieldValues>;
}

타입스크립트 핸드북