컴포넌트 프롭스 타입

type AppProps = {
  message: string;
  count: number;
  disabled: boolean;
  /** 타입의 배열! */
  names: string[];
  /** 정확한 문자열 값 지정을 위한 문자열 리터럴, 유니온 타입으로 결합 */
  status: "waiting" | "success";
  /** 런타임에 더 많은 속성을 가질 수 있지만 알려진 속성이 있는 객체 */
  obj: {
    id: string;
    title: string;
  };
  /** 객체의 배열! (흔함) */
  objArr: {
    id: string;
    title: string;
  }[];
  /** 모든 비원시값 
   * - 어떤 속성에도 접근할 수 없음 (흔하지 않지만 플레이스홀더로 유용) */
  obj2: object;
  /** 필수 속성이 없는 인터페이스 
   * - (`React.Component<{}, State>` 같은 것을 제외하고 흔하지 않음) */
  obj3: {};
  /** 같은 타입의 무수히 많은 속성을 가진 딕셔너리 객체 */
  dict1: {
    [key: string]: MyTypeHere;
  };
  dict2: Record<string, MyTypeHere>; // dict1과 동일
  /** 아무것도 받지 않고 반환하지 않는 함수 (매우 흔함) */
  onClick: () => void;
  /** 명명된 프롭이 있는 함수 (매우 흔함) */
  onChange: (id: number) => void;
  /** 이벤트를 받는 함수 타입 구문 (매우 흔함) */
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** 이벤트를 받는 대체 함수 타입 구문 (매우 흔함) */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  /** 호출하지 않는 한 어떤 함수라도 됨 (권장하지 않음) */
  onSomething: Function;
  /** 선택적 프롭 (매우 흔함!) */
  optional?: OptionalType;
  /** `useState`에 의해 반환된 상태 설정 함수를 자식 컴포넌트에 전달할 때. 
   * `number`는 예시이며, 상태의 타입에 맞게 바꿔주세요 */
  setState: React.Dispatch<React.SetStateAction<number>>;
};

// `type AnyNonNullishValue = {}` 또는 
// `type AnyNonNullishValue = Object`와 동등
interface AnyNonNullishValue {} 

let value: AnyNonNullishValue;

// 다음은 모두 괜찮지만 예상치 못한 것일 수 있음
value = 1;
value = "foo";
value = () => alert("foo");
value = {};
value = { foo: "bar" };

// 다음은 에러
value = undefined;
value = null;

export declare interface AppProps {
  // 최선, 리액트가 렌더링할 수 있는 모든 것을 받아들임
  children?: React.ReactNode;
  // 단일 리액트 요소
  childrenElement: React.JSX.Element; 
  // 스타일 prop을 전달하기 위함
  style?: React.CSSProperties; 
  // 폼 이벤트! 제네릭 매개변수는 event.target의 타입
  onChange?: React.FormEventHandler<HTMLInputElement>; 
  // 버튼 요소의 모든 prop을 모방하고 명시적으로 ref를 전달하지 않음
  props: Props & React.ComponentPropsWithoutRef<"button">; 
  // MyButtonForwardedRef의 모든 prop을 모방하고 명시적으로 ref를 전달함
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; 
}