React+TypeScript+GraphQL项目currency隐式any类型报错如何解决？

你遇到的是useQuery默认没有关联查询返回值类型导致的隐式any报错，按以下步骤修改即可：

方法1：手动声明类型（适合小型项目） #

第一步：定义查询返回的类型结构 #

根据你的GraphQL查询语句，定义对应的TS类型：

// 可以放在组件文件顶部或者项目统一的类型文件中
interface Rate {
  currency: string;
  rate: string;
}

interface GetExchangeRatesQuery {
  rates: Rate[];
}

第二步：给useQuery传入泛型参数 #

调用useQuery时将定义好的查询类型作为第一个泛型参数传入，同时要处理data可能为undefined的情况（查询加载中/报错时data为空）：

// 传入泛型绑定返回值类型
const { loading, error, data } = useQuery<GetExchangeRatesQuery>(EXCHANGE_RATES);

// 用可选链+空值合并处理data为空的场景，避免运行时报错
const renderedExchangeRates = data?.rates.map(({ currency, rate }) => (
  <div key={currency}>
    <p>
      {currency}: {rate}
    </p>
  </div>
)) ?? [];

方法2：自动生成类型（适合中大型项目） #

如果项目里GraphQL查询较多，可使用GraphQL Code Generator工具自动根据查询语句生成TS类型，无需手动编写，还能保证类型和查询结构完全同步，避免手动写类型写错的问题。
你只需要在项目中配置好代码生成器的规则，每次修改查询语句后执行生成命令即可自动生成所有查询的类型定义，使用时直接导入对应类型传给useQuery泛型即可。

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