type safe

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -2,11 +2,14 @@ import React, {
   useCallback, useRef, useEffect,
 } from 'react';
 
+import { GetInputProps } from '../interfaces/downshift';
+
+
 type Props = {
   searchKeyword: string,
   onChangeSearchText?: (text: string) => void,
   onClickClearButton?: () => void,
-  getInputProps: any
+  getInputProps: GetInputProps,
 }
 export const SearchForm = (props: Props): JSX.Element => {
   const {

apps/app/src/features/search/client/components/SearchMenuItem.tsx

@@ -1,11 +1,13 @@
 
 import React from 'react';
 
+import type { GetItemProps } from '../interfaces/downshift';
+
 type Props = {
   url: string
   index: number
   highlightedIndex: number | null
-  getItemProps: any
+  getItemProps: GetItemProps
   children: React.ReactNode
 }
 
@@ -17,12 +19,11 @@ export const SearchMenuItem = (props: Props): JSX.Element => {
   const option = {
     index,
     item: { url },
-    className: 'mb-2 d-flex',
     style: { backgroundColor: highlightedIndex === index ? 'lightgray' : 'white', pointer: 'cursor' },
   };
 
   return (
-    <li className="text-muted d-flex" {...getItemProps(option)}>
+    <li className="text-muted mb-2 d-flex" {...getItemProps(option)}>
       { children }
     </li>
   );

apps/app/src/features/search/client/components/SearchMethodMenuItem.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'next-i18next';
 
 import { useCurrentPagePath } from '~/stores/page';
 
+import type { GetItemProps } from '../interfaces/downshift';
+
 import { SearchMenuItem } from './SearchMenuItem';
 
 type ComponentType = 'nomal' | 'tree' | 'exact';
@@ -12,7 +14,7 @@ type SearchMethodMenuItemSubstanceProps = {
   componentType: ComponentType
   index: number
   highlightedIndex: number | null
-  getItemProps: any
+  getItemProps: GetItemProps
   searchKeyword: string
 }
 

apps/app/src/features/search/client/components/SearchResultMenuItem.tsx

@@ -5,11 +5,13 @@ import { useDebounce } from 'usehooks-ts';
 
 import { useSWRxSearch } from '~/stores/search';
 
+import type { GetItemProps } from '../interfaces/downshift';
+
 import { SearchMenuItem } from './SearchMenuItem';
 
 type Props = {
   searchKeyword: string,
-  getItemProps: any,
+  getItemProps: GetItemProps,
   highlightedIndex: number | null,
 }
 export const SearchResultMenuItem = (props: Props): JSX.Element => {

apps/app/src/features/search/client/interfaces/downshift.ts

@@ -0,0 +1,6 @@
+import type { ControllerStateAndHelpers } from 'downshift';
+
+type DownshiftItem = { url: string };
+
+export type GetItemProps = ControllerStateAndHelpers<DownshiftItem>['getItemProps']
+export type GetInputProps = ControllerStateAndHelpers<DownshiftItem>['getInputProps']