添加use-places-autocomplete后React/Next.js构建报Type expected错误

原错误原因 #

你遇到的第一个构建错误，本质是TypeScript 3.7.2不支持模板字面量类型（即${google.maps.places.PlacesServiceStatus}这类语法），而use-places-autocomplete的类型定义文件中使用了该特性，导致编译失败。

解决方案步骤 #

1. 升级TypeScript到兼容版本 #

模板字面量类型是TypeScript 4.1及以上版本才引入的特性，必须升级TS版本才能适配。建议选择4.5.x及以上的稳定版本（避免刚推出的4.1版本可能存在的适配问题）：

# npm 命令
npm install typescript@^4.5.0 --save-dev

# yarn 命令
yarn add typescript@^4.5.0 --dev

2. 处理升级后的TSError编译错误 #

升级TS后出现的TSError: ⨯ Unable to compile TypeScript错误，通常是项目配置或其他依赖兼容性问题导致，可按以下步骤排查：

• 检查tsconfig.json配置：确保target字段设置为es2015或更高版本，lib数组包含dom、es2015等必要项，示例配置片段：

  {
    "compilerOptions": {
      "target": "es2015",
      "lib": ["dom", "dom.iterable", "es2015"]
    }
  }
  

• 更新相关类型依赖：确保@types/react、@types/google.maps等类型包版本与React 17.0.2及新版本TS兼容，比如安装适配React17的类型包：

  npm install @types/react@^17.0.0 --save-dev
  

• 清理依赖缓存：删除node_modules文件夹、package-lock.json（或yarn.lock），然后重新安装依赖，同时清除TypeScript缓存：

  npx tsc --clearCache
  

• 检查测试工具兼容性：如果错误来自测试启动器（如Cypress），需升级测试工具及其TypeScript预处理插件到兼容新版本TS的版本，比如更新cypress和@cypress/typescript-preprocessor。

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