如何使用 JSDoc 为基于 Apollo Client 的代码在 JavaScript 中提供类型提示？

Question

我在使用 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 上创建了一个简单的重现

Answer 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 以便我可以轻松地使我选择的字段成为可选字段（不像 built-int Partial 类型使所有字段都可选）并使 data QueryResult 的字段也是可选的（如 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"
>;

如何使用 JSDoc 为基于 Apollo Client 的代码在 JavaScript 中提供类型提示？

How to provide type hints in JavaScript using JSDoc for Apollo Client based code?

javascript

apollo-client

jsdoc