青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

ReactでTypeScriptで、propsで?で渡しているときに、?だからなんも渡さないと、定義した型 | undefined としてエラーが出る

type Props = {
  option?: string;
}

export const foo: React.FC<Props> = props = {

  return (
    <div>{props.options}</div>
  )
}

foo.defaultProps = {
  img: 'dummy.jpg',
};

で、

型 'string | undefined' を型 'string' に割り当てることはできません。
型 'undefined' を型 'string' に割り当てることはできません。

というエラーが出る。

解決策は、

qiita.com

これも参考になりますが、

export const foo: React.FC<Props> = props = {

  return (
    <div>{props.options as string}</div>
  )
}

でも良いらしいです。