Type Checking - rkaku/react-hooks-101 GitHub Wiki

  • pages
  • actions
  • types
    • creatorsToActions
  • components
  • hooks

Props

import PropTypes from 'prop-types'

function MyComp({ str, onClick, obj }) {
  return <div onClick={ onClick }>{ str }</div>
}

MyComp.propTypes = {
  str:PropTypes.string,
  onClick:PropTypes.func.isRequired
  onj:PropTypes.shape({
    name:PropTypes.string,
    age:PropTypes.number,
    gender:PropTypes.oneOf(['M', 'F']),
    birthdate:PropTypes.instanceOf(Date)
  })
}
function onClickHandle() {
}

<MyComp 
  str="Hi"
  onClick={ onClickHandle }
  obj={ { name: "John" } }
></MyComp>

Flow

yarn add -D flow-bin

"scripts": {
  "flow": "flow"
},

npm run flow init

import * as React from 'react'

type MyCompProps = {
  name:string,
  age?:Number,
  children:React.Node
}

TypeScript

create-react-app hogehoge --typescript

interface MyCompInterface {
  name: string
}

type MyCompType = {
  name: string,
  gender: "M" | "F",
  isMarried?: boolean,
  [key: string]: any
}

function MyComp({ name, gender, whatever }: MyCompType) {
  return <div>{ name } : { gender } : { whatever }</div>
}
<MyComp
  name="John"
  gender="M"
  whatever="true"
/>
⚠️ **GitHub.com Fallback** ⚠️