Tengo problemas para configurar sugerencias de tipo para mi código JavaScript usando JSDoc (tratando de hacer que esto funcione con VSCode y WebStorm).
Como primer paso, convertí el esquema GraphQL en un conjunto de entradas JSDoc @typedef usando @graphql-codegen/cli . Por el bien de esta conversación, hablemos de esta:
// schema.js /** * @typedef {Object} Country * @property {string} code * @property {string} name */ Luego, en algún lugar de mi App.js intenté escribir:
// 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); }; Sin embargo, parece que las definiciones de tipo de schema.js se ignoran (tanto App.js como schema.js están en el mismo directorio).
Mi pregunta es la siguiente: ¿es posible configurar algo como esto: tener definiciones de tipo JSDoc de recolección IDE y proporcionar sugerencias de tipo? Si la respuesta es SÍ, ¿cómo puedo configurar esto?
Creé una reproducción simple en CodeSandbox en https://codesandbox.io/s/graphql-type-hints-n1vh0
Si bien no pude hacer que esto funcionara usando solo JSDoc, tuve un buen éxito usando la misma @graphql-codegen/cli y generando el archivo .d.ts en su lugar. Después de eso, pude proporcionar sugerencias de tipo correctas usando el siguiente código:
/** * @typedef {import("../types/schema").Country} Country * @typedef {import("../types/helpers").ApolloQueryResult<{countries: Country[]}>} QueryResult * * @returns {QueryResult} */ const useGetCountries = () => { return useQuery(GET_COUNTRIES); }; También implementé helpers.d.ts para que pueda fácilmente hacer que los campos de mi elección sean opcionales (a diferencia del tipo Partial incorporado que hace que todos los campos sean opcionales) y hacer que data archivados de QueryResult también sean opcionales (como en la documentación de Apollo. No lo hice). Tuve tiempo de descubrir por qué no está ya en los .d.ts de Apollo)
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" >;