【React】TypeScript を使用しているのに PropTypes での型定義は必要か？

結論

TypeScript での props の型定義も、PropTypes での型定義も、どちらも設定した方が吉です。

Typescript と PropTypes の違い

• TypeScript：コードを書いているときに役立ちます。
  • TypeScriptの場合は、エディタでコードを書いているときに型チェックしてメッセージを出してくれますが、
    buildした後は型チェックをしてくれません（例.DevTools の Console でのエラーメッセージの出力は無し）。
• PropTypes：たとえばAPIからJSONをロードする場合に役立ちます。
  • PropTypesの場合は、buildした後にも DevTools の Console 等でエラーメッセージを出力してくれます。

検証してみた

※サンプルコードの内容は適度に省略してあります。

header.tsx

import React from "react"
import PropTypes from "prop-types"
.
.
type Props = {
  siteTitle: string
} & typeof defaultProps;

const defaultProps = {
  siteTitle: `siteTitleが渡されなかった場合のデフォルトのタイトル`,
}
.
,
const Header: React.FC<Props> = ({ siteTitle }) => (
  <h1>{siteTitle}</h1>
)
.
.
// この propTypes を設定したりコメントアウトしたりして検証してみます。
Header.propTypes = {
  siteTitle: PropTypes.string.isRequired,
}

layout.tsx

import React from "react"
import PropTypes from "prop-types"
import Header from "./header"
.
.
// このsiteTitleは、本来ならstring型の値を渡さなければいけませんが、試しにnumber型の値を渡して意図的にエラーを吐いてくれるようにしてみます。
const Layout: React.FC = ({ children }) => (
  <Header siteTitle={155} />
)

PropTypes を定義した場合は、DevTools の Console で下記エラーメッセージを出力して怒ってくれますが、

index.js:2177 Warning: Failed prop type: Invalid prop siteTitle of type number supplied to Header, expected string.
in Header (at layout.tsx:28)
in Layout (at pages/index.tsx:9)
.
.

PropTypesを設定していない場合は、何も怒ってくれません。

よって、TypeScriptの使用の有無に関わらず、PropTypesも設定しておいた方が無難そうです。
（二重チェックになるので不必要である、と言うことは無さそうです。）

参考にさせていただいたURL

React+TypeScriptでPropTypesを使う