React拆分组件遇TypeScript报错：Property 'label' does not exist on type 'unknown'

问题原因 #

将HookAutoComplete拆分为独立组件后，TypeScript无法从原文件上下文推断出isOptionEqualToValue回调中参数的类型，导致option和value被默认为unknown类型，访问label属性时触发类型错误。同一文件中能正常运行是因为父组件的Form上下文为TypeScript提供了足够的类型信息。

解决方案 #

通过显式定义选项类型并为组件指定泛型/props类型，让TypeScript明确参数结构：

1. 定义选项类型接口
   根据top100Films的结构，创建对应的类型：

   interface FilmOption {
     label: string;
     value: string;
   }
   

2. 为HookAutoComplete指定泛型
   在独立组件中，给HookAutoComplete加上泛型<FilmOption>，明确它处理的选项类型：

   export default function AutoComplete({ registerState }) {
     return (
       <HookAutoComplete<FilmOption>
         {...registerState("movie")}
         autocompleteProps={{
           options: top100Films,
           autoHighlight: true,
           isOptionEqualToValue: ({ label }, value) => label === value.label
         }}
         textFieldProps={{
           label: "Movie",
           placeholder: "The..."
         }}
         gridProps={{
           xs: 12
         }}
         rules={{
           required: {
             message: "Required",
             value: true
           }
         }}
       />
     );
   }
   

3. （可选）为组件Props指定类型
   进一步规范组件的registerState参数类型，避免隐式any：

   import { UseFormRegister } from 'react-hook-form';
   
   interface AutoCompleteProps {
     registerState: UseFormRegister<{ movie: FilmOption }>;
   }
   
   export default function AutoComplete({ registerState }: AutoCompleteProps) {
     // ... 组件内容不变
   }
   

说明 #

显式指定类型后，TypeScript就能识别isOptionEqualToValue中的label属性，错误即可消除。这种方式也能让组件的类型约束更清晰，符合TypeScript的类型安全要求。

内容的提问来源于stack exchange，提问作者user944513