[React]"xxxx is missing in props validation"の対処

Question

聞きたいこと

TypeScript + React + ESLint にてフロントエンド開発をしているのですが、ESLintで下のエラーが発生しています。

xxx(コンポーネント内のプロパティ名) is missing in props validation react/prop-types

例えば下のHeaderコンポーネントだと、

'width' is missing in props validation react/prop-types

といったエラーが表示されます。

import * as React from 'react';

:

interface Props {
  width: number;
}

:

const Header: React.FC<Props> = (props) => {
  const { width } = props;

  return (
    
    :

  )
}

そこで、下のサイトを参考にして、prop-typesというパッケージを追加してバリデーションを追加することでエラーが消えるのですが、
そもそも props.width は TypeScriptの型定義でnumberしか受け付けないようになっていると思うので、props-types をインストールしてバリデーションを追加するのでなく、ESLintのバリデーションメッセージのエラーを表示しないようにするのでもいいのではと思っています。

参考にしたサイト

ESLintのバリデーションメッセージを非表示にすることによる懸念等ありましたら教えてほしいです。

Answer 1

ESLintのバリデーションメッセージを非表示にすることによる懸念等ありましたら教えてほしいです。

TypeScriptで完全に型付けするのであれば、特にありません。

Comments

[maisumakun]

二重管理すると、TypeScriptの型とpropTypeで違うものを設定してしまう、という事故も起きかねません。