propsの型をbooleanに変更する方法

前提

1. コンポーネントに react hook form の入力値を渡し、入力の有無によってコンポーネント内で表示する要素の出し分けをしたい。
2. ただ入力の有無がわかればいいのでbooleanに変換して渡したほうがよさそう

ということで、まずコンポーネントの方を次のような感じにする

ExampleComponent.tsx

interface Props {
  hasInput: boolean;　//　propsで受け取る値はbool値に
  children?: React.ReactNode;
}

export const ExampleComponent: React.FC<Props> = ({
  hasInput,
  children,
}) => {
  // ... コンポーネントの中身 ...
}

ExampleComponentを呼び出す際に以下のようにhasInputを渡します

// ここでsomeValueをbooleanに変換
<ExampleComponent hasInput={!!someValue}> 
  {/* ... */}
</ExampleComponent>

!!はsomeValueをbooleanに変換するためのものです。someValueがnull、undefined、""（空文字列）、0のいずれかの場合、hasInputはfalseになります。それ以外の場合はtrueになります。

この変更を行うことでコードがより直感的になり、読みやすくなります。

詳しく説明してみます

!（論理NOT）：
この演算子は、オペランドの真偽値を反転させます。つまり、trueはfalseに、falseはtrueに変わります。オペランドがtruthyな値であれば、!はそれをfalseに変換します。逆に、オペランドがfalsyな値であれば、!はそれをtrueに変換します。

example

javascript
Copy code
!true       // false
!false      // true
!""         // true
!"hello"    // false

!!：
二つの!演算子を連続して使うことで、最初の!で変換された真偽値が再び反転され、元の値の真実性を示す真偽値が得られます。

example

javascript
Copy code
!!true      // true
!!false     // false
!!""        // false
!!"hello"   // true

したがって、!!someValueとすることで、someValueがtruthyな値であればtrueに、falsyな値であればfalseに変換されます。