React.FC 유형 확장

분위기에서 @types/react를 사용하지 않습니다.의 속편.나 자신도 마찬가지지만, 나는 많은 항목들이 스타일드-components를 사용한다고 생각한다.이때 규정에 따라 Props형에 삽입className?: string한다.

import * as React from 'react'

type Props = {
  className?: string
  label: string
  onClick: (props?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}

const View: React.FC<Props> = props => (
  <p className={props.className}>
    <button onClick={props.onClick}>{props.label}</button>
  </p>
)

export default styled(View)`
background-color: #f00;
`

이를 생략하기 위해 다음과 같이 확장React.FC형.확장은 다른 형식을 준비하고 declare 모듈에 새 형식을 추가하기만 하면 됩니다.먼저 React.FC형의 원래 정의를 확인한다.
@types/react/index.d.ts

type FC<P = {}> = FunctionComponent<P>;

항목의 위치에 다음 정의를 추가합니다.모델 이름은 무엇이든지 가능합니다FCX형.Intersection Types{ className?: string }에 주입합니다.
src/type.ts

import * as React from 'react'
declare module 'react' {
  type FCX<P = {}> = FunctionComponent<P & { className?: string }>
}

FCX 모델 사용

모듈 유형 정의에 추가되었기 때문에 React.FCX 에서 찾을 수 있습니다.현재 지루한 className?: string 성명을 생략할 수 있습니다

import * as React from 'react'

type Props = {
  label: string
  onClick: (props?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}

const View: React.FCX<Props> = props => (
  <p className={props.className}> {/* No Error! */}
    <button onClick={props.onClick}>{props.label}</button>
  </p>
)

export default styled(View)`
background-color: #f00;
`