如何使用 JSDoc 为基于 Apollo 客户端的代码在 JavaScript 中提供类型提示？答案

【问题标题】：How to provide type hints in JavaScript using JSDoc for Apollo Client based code?如何使用 JSDoc 为基于 Apollo 客户端的代码在 JavaScript 中提供类型提示？
【发布时间】：2022-02-16 19:56:03
【问题描述】：

我在使用 JSDoc 为我的 JavaScript 代码设置类型提示时遇到了麻烦（尝试使用 VSCode 和 WebStorm 来实现）。

作为第一步，我使用 @graphql-codegen/cli 将 GraphQL 模式转换为一组 JSDoc @typedef 条目。为了这次谈话，让我们谈谈这个：

// schema.js

/**
 * @typedef {Object} Country
 * @property {string} code
 * @property {string} name
 */

然后，在我的App.js 某处我尝试写：

// App.js

const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      code
      name
    }
  }
`;

/**
 * @typedef {import("./schema").Country} Country
 * @typedef {import("@apollo/client").QueryResult} QueryResult

 * @returns {QueryResult<Country>}
 */
const useGetCountries = () => {
  return useQuery(GET_COUNTRIES);
};

但是，schema.js 中的类型定义似乎被忽略了（App.js 和 schema.js 都在同一个目录中）。

我的问题是：是否可以设置这样的东西 - 让 IDE 拾取 JSDoc 类型定义并提供类型提示？如果答案是肯定的，我将如何进行设置？

我在 https://codesandbox.io/s/graphql-type-hints-n1vh0 的 CodeSandbox 上创建了一个简单的重现

【问题讨论】：

标签： javascript apollo-client jsdoc

【解决方案1】：

虽然我无法仅使用 JSDoc 完成这项工作，但我使用相同的 @graphql-codegen/cli 实用程序并生成 .d.ts 文件取得了巨大成功。之后，我能够使用以下代码提供正确的类型提示：

/**
 * @typedef {import("../types/schema").Country} Country
 * @typedef {import("../types/helpers").ApolloQueryResult<{countries: Country[]}>} QueryResult
 *
 * @returns {QueryResult}
 */
const useGetCountries = () => {
  return useQuery(GET_COUNTRIES);
};

我还实现了helpers.d.ts，这样我就可以轻松地使我选择的字段成为可选的（不像内置的Partial 类型使所有字段都是可选的）并且使QueryResult 的data 字段也是可选的（如在Apollo 文档。没有时间弄清楚为什么它不在 Apollo 的 .d.ts)

type OptionalKey<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

export type ApolloQueryResult<TData = any, TVariables = any> = OptionalKey<
  QueryResult<TData, TVariables>,
  "data"
>;

【讨论】：