React.FC에서 props 유형 가져오기

정의React.FC<Props> 이후Props가 아니라면
Conditional Types - Advanced Types - TypeScript를 사용하여 객체 함수의 매개변수 유형을 가져옵니다.

필요 없음

이 기사보다 아래 기사export를 확인하는 것이 좋다.
Parameters - Utility Types - TypeScript
Parameters

type T1 = Parameters<(s: string) => void>;  // [string]

인스턴스

ComponentProps-type

import React from 'react'

type ComponentProps<T> = T extends (props: infer P) => ReturnType<React.FC> ? P : never

React.FC의 인스턴스에만 국한되지 않으려면

하지만React.ComponentProps...할 때any 사용한다
ComponentProps-unknown-type

type ComponentProps<T> = T extends (props: infer P) => unknown ? P : never

설명

조건부 유형의 유형 추론-Type Script2.8 조건부 유형-Qiita 정보

・・・
type FirstArgs<T> = T extends (a1: infer A1, ...rest: any[]) => any ? A1 : never;
・・・

여기 참고

취득 대상unknown에서 Props

로 이름 변경

반환값A1을 P의 반환값으로 변경

견본

user.tsx

import React from 'react'

type Props = {
  user: {
    /** ユーザー ID */
    id: number
    /** ユーザー名 */
    name: string
  }
}

const Component: React.FC<Props> = props => (
  <div>
    {props.user.id} {props.user.name}
  </div>
)

export default Component

user.story.tsx

import React from 'react'
import { storiesOf } from '@storybook/react'

import User from './user'

type ComponentProps<T> = T extends (props: infer P) => ReturnType<React.FC> ? P : never

storiesOf('organisms/User', module).add('main', () => {
  const user: ComponentProps<typeof User>['user'] = {
    id: 1,
    name: 'taro',
  }
  return (
    <>
      <User user={user} />
    </>
  )
})