_util

_util (타입 유틸리티)

5.13.0부터 사용할 수 있어요.

출처: 문서

본문

GetRef

컴포넌트의 ref 속성 정의를 가져와요. 직접 노출되지 않거나 자식 컴포넌트인 컴포넌트에 특히 유용해요.

import { Select } from 'antd';
import type { GetRef } from 'antd';

type SelectRefType = GetRef<typeof Select>; // BaseSelectRef

GetProps

컴포넌트의 props 속성 정의를 가져와요.

import { Checkbox } from 'antd';
import type { GetProps } from 'antd';

type CheckboxGroupType = GetProps<typeof Checkbox.Group>;

Context의 속성 정의를 가져오는 것도 지원해요.

import type { GetProps } from 'antd';

interface InternalContextProps {
  name: string;
}

const Context = React.createContext<InternalContextProps>({ name: 'Ant Design' });

type ContextType = GetProps<typeof Context>; // InternalContextProps

React.ComponentProps와의 차이 {#react-componentprops-diff}

React.ComponentProps는 내장 요소(intrinsic elements)나 React 컴포넌트가 받는 props를 가져오는 공식 React 유틸리티 타입이에요. 예를 들어 React.ComponentProps<'button'>이나 React.ComponentProps<typeof Button>처럼요. GetProps는 Ant Design의 보조 타입으로, 내장 요소 이름은 지원하지 않지만 React 컴포넌트 외에도 React.Context에서 직접 값 타입을 추출하거나, 이미 존재하는 props 타입 객체를 그대로 통과시킬 수 있어요.

GetProp

컴포넌트의 단일 props 또는 context 속성 정의를 가져와요. NonNullable을 내장하고 있어서 값이 비어 있을 걱정을 하지 않아도 돼요.

import { Select } from 'antd';
import type { GetProp, SelectProps } from 'antd';

// Both of these can work
type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
type SelectOptionType2 = GetProp<typeof Select, 'options'>[number];
type ContextOptionType = GetProp<typeof Context, 'name'>;

세 번째 파라미터 Return을 통해 함수 속성의 반환 타입을 가져오는 것도 지원해요.

import type { GetProp } from 'antd';

interface Props {
  func?: (value: number) => string;
  configOrFunc?: { configA?: string } | (() => { anotherB?: string });
}

type OnChangeReturn = GetProp<Props, 'func', 'Return'>; // string
type ClassNamesReturn = GetProp<Props, 'configOrFunc', 'Return'>; // { anotherB?: string }

더 알아보기 (Learn more)