如何修复Expo TypeScript中Formik FieldArray类型导入错误

一、修改tsconfig.json的include字段能解决吗？ #

直接修改include字段无法彻底解决FieldArray类型为any的问题，但可以优化TypeScript对JS/JSX文件的识别。你的当前include仅覆盖TS/TSX文件，补充JS/JSX后缀后能让TypeScript处理所有源码文件，但这不是核心修复手段：

调整后的include配置：

"include": [
  "**/*.ts",
  "**/*.tsx",
  "**/*.js",
  "**/*.jsx",
  ".expo/types/**/*.ts",
  "expo-env.d.ts"
]

二、核心解决办法 #

FieldArray类型缺失的根本原因通常是react-hook-form的类型定义未被正确识别，或依赖版本不兼容，按以下步骤排查：

1. 确认react-hook-form版本兼容性
   Expo 48/49基于React 18.x，需搭配react-hook-form v7.x（自带完整TypeScript类型）。运行以下命令检查版本：

   npm list react-hook-form
   

   若版本低于v7，直接升级：

   npm install react-hook-form@latest
   

2. 重置依赖缓存
   依赖缓存损坏可能导致类型定义无法加载，执行以下操作重置：

   rm -rf node_modules package-lock.json
   npm install
   

3. 修正导入方式
   确保从react-hook-form官方包导入FieldArray，避免第三方库或错误路径：

   import { FieldArray, useForm } from 'react-hook-form';
   

4. 优化TypeScript编译配置
   在tsconfig.json的compilerOptions中添加以下配置，提升类型识别兼容性：

   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true
   

5. 兜底：手动补充类型声明
   若上述步骤无效，在项目根目录创建typings/react-hook-form.d.ts文件，手动声明FieldArray类型：

   import 'react-hook-form';
   
   declare module 'react-hook-form' {
     export interface FieldArrayProps<TFieldValues extends FieldValues = FieldValues> {
       name: Path<TFieldValues>;
       children: (props: FieldArrayRenderProps<TFieldValues>) => React.ReactNode;
     }
   
     export function FieldArray<TFieldValues extends FieldValues = FieldValues>(
       props: FieldArrayProps<TFieldValues>
     ): React.ReactElement;
   }
   

三、测试现象说明 #

• 无TS的Expo 48模板正常：因为没有TypeScript类型检查，类型缺失问题不会被暴露，但实际类型仍未正确识别。
• TS模板和Expo 49模板异常：严格模式下TypeScript会强制校验类型，因此直接触发错误。

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