React+TypeScriptでPropTypesを使う

2019-11-10

Page content

JavaScript + PropTypes

PropTypesを使って、Propsの型やRequiredかどうかを指定できる。

import React from "react";
import PropTypes from "prop-types";
...

class SearchContents extends React.Component {
  render() {
    const {
      execSearch,
      resetSearch,
      handlePopper
    } = this.props;

    return (
      <div>
        <Popper
          open={open}
          anchorEl={anchorEl}
          placement="top-end"
          transition
        >
            ...
        </Popper>
        <Fab color="primary" aria-label="Search">
          <SearchIcon onClick={handlePopper} />
        </Fab>
      </div>
    );
  }
}

SearchContents.propTypes = {
  execSearch: PropTypes.func.isRequired,
  resetSearch: PropTypes.func.isRequired,
  handlePopper: PropTypes.func.isRequired
};

TypeScript + PropTypes

TypeScriptでPropTypesを使う場合は書き方が変わる。

というか、Propsを定義する必要があるので、PropTypesを使うと二重定義になる。

import * as React from "react";
import PropTypes from "prop-types";
...

interface Props {
  execSearch: (team: string, name: string) => {[key: string]: string};
  resetSearch: () => {[key: string]: string};
  handlePopper: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {[key: string]: any};
}

class SearchContents extends React.Component<Props> {
  static propTypes = {
    execSearch: PropTypes.func.isRequired,
    resetSearch: PropTypes.func.isRequired,
    handlePopper: PropTypes.func.isRequired
  };
  render() {
    const {
      execSearch,
      resetSearch,
      handlePopper
    } = this.props;

    return (
      <div>
        <Popper
          open={open}
          anchorEl={anchorEl}
          placement="top-end"
          transition
        >
            ...
        </Popper>
        <Fab color="primary" aria-label="Search">
          <SearchIcon onClick={handlePopper} />
        </Fab>
      </div>
    );
  }
}