問題

以下のコードで ‘e’ implicitly has an ‘any’ type というエラーが出ていた。

<DropdownMenu>
  {props.options.map((item, idx) => (
    <DropdownOption
      key={idx}
      onMouseDown={(e) => handleSelectValue(e, item)}
      onClick={(e) => handleSelectValue(e, item)}
    >
      <DropdownItem item={item} />
    </DropdownOption>
  ))}
</DropdownMenu>

動機

DropdownOption を div タグに変えるとエラーが消えるが、DropdownOption は

const DropdownOption = styled.div`
  padding: 8px 12px 8px 12px;
  &:hover {
    background-color: #f9f9f9;
  }
`;

という要素であり、div に少し装飾を加えた程度であるため、エラーの原因になるとは考えづらい。そこでライブラリのバグではないかと考えた。

行動

参考文献を見ると、同じエラーになっている人がおり、styled-components のアップデートで解決していた。そこで、styled-components をアップデートした。

teppe@LAPTOP-N72NG92A MINGW64 ~/Documents/private/programming/js/react/shop/src/components/molecules/Dropdown (main)    
$ npm styled-components --version
9.6.6
(base) 
teppe@LAPTOP-N72NG92A MINGW64 ~/Documents/private/programming/js/react/shop/src/components/molecules/Dropdown (main)    
$ npm update styled-components

added 1 package, changed 1 package, and audited 1593 packages in 3s

296 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
(base) 
teppe@LAPTOP-N72NG92A MINGW64 ~/Documents/private/programming/js/react/shop/src/components/molecules/Dropdown (main)    
$ npm styled-components --version
9.6.6

バージョンは変わっていないが中身が少し変わった。

変更点は以下のようになっていた

結果

event の型に関するエラーは styled-components のバグによるものだと考えられ、 styled-components をアップデートすることで解消した。

参考文献

https://github.com/styled-components/styled-components/issues/4052