21.08.31 TIL - TS ComponentProps

ComponentProps

React의 특정 컴포넌트에서 쓰이는 props 의 타입들을 별도의 타입으로 선언해서 사용하고 싶으면 아래와 같이 작성한다.

type Props = React.ComponentProps<typeof 컴포넌트이름>;

위 값을 상속받아 다른 값도 추가적으로 더하고 싶으면 아래와 같이 작성한다.

type Props = React.ComponentProps<typeof 컴포넌트이름> & {
  name: string;
  age: number;
};

Partial<T>

타입 T의 모든 프로퍼티를 Optional 형태로 바꾸어준다.

type Partial<T> = { [P in keyof T]?: T[P]; };

오른쪽에서 P in keyof T는 타입 T의 프로퍼티 키값에 해당하는 P를 전부 옵셔널(물음표 키워드) 형태로 감싸 리턴한다.

Require<T>

모든 Optional 타입들을 언랩핑한다.

type Required<T> = {
    [P in keyof T]-?: T[P];
};

마이너스 연산자는 옵셔널을 제거해주는 연산자이다.

partials에서 물음표 연산자만 사용한 것처럼 플러스 연산자를 생략할 수 있다.

참고

Typescript 유틸리티 클래스 파헤치기