【React】【typescript】Functional Component の defaultProps の定義方法

はじめに

最近 React Component を実装する際は Functional Component で書いています。
その際、 defaultProps の解決方法に躓いたので書きます。

他でよく紹介されている方法

import React from 'react';

type Props = {
  foo?: string;
}

const BarComponent = (props: Props) => {
  return (
    <div>{props.foo}</div>
  );
}
BarComponent.defaultProps = {
  foo: 'FOO'
}

この方法だと props.foo が string | undefined になってしまうという問題があります。

解決方法

import React from 'react';

type Props = {
  foo?: string;
}

const BarComponent = ({ foo = 'FOO' }: Props) => {
  return (
    <div>{foo}</div>
  );
}

これで foo が string になります。

というのを上司に教えてもらいました。
これで問題があれば教えてください。