ESLintでProp type `object` is forbidden (react/forbid-prop-types)となるときの対処法

HaneCa 投稿日: 2018年7月13日最終更新日: 2019年1月1日

ESLintで「Prop type `object` is forbidden (react/forbid-prop-types)」と言うエラーの対処法について説明します。

このエラーは次のように外部から引き継ぐ変数をクラス内で利用する場合、その変数が想定している型であることを確認するときに現れます。

import PropTypes from 'prop-types';
ClassName.propTypes = {
  variable: PropTypes.object.isRequired,
};

これは想定する変数の型がobjectと言う説明では不十分であると判断するため、ESLintではエラーとして定義することができます。

すなわち、下記のようにこのobjectがどのようなメンバー変数を持つべきかを定義することで、解決することができます。

import PropTypes from 'prop-types';
ClassName.propTypes = {
  variable: PropTypes.shape({
    member_A: PropTypes.string,
  }).isRequired,
};

上記の例では、variableと言う変数が、member_Aと言う文字列型のメンバー変数を持ったオブジェクトであると言うことを示しています。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

HaneCa