Como gerar JSDoc para a função `pipe`d ES6


10

Eu tenho uma função no estilo ES6 que é definida usando a composição de funções com asyncPipe.

import { getItemAsync } from 'expo-secure-store';

const asyncPipe = (...fns) => x => fns.reduce(async (y, f) => f(await y), x);

const getToken = () => getItemAsync('token');

const liftedGetToken = async ({ ...rest }) => ({
  token: await getToken(),
  ...rest,
});

const liftedFetch = ({ body, route, token, method = 'GET' } = {}) =>
  fetch(route, {
    ...(body && { body: JSON.stringify(body) }),
    headers: {
      'Content-Type': 'application/json',
      ...(token && { Authorization: `Bearer ${token}` }),
    },
    method,
  });

const json = res => res.json();

/**
 * @method
 * @param {Object} fetchSettings the settings for the fetch request
 * @param {Object} fetchSettings.body the body of the request
 * @param {string} fetchSettings.route the URL of the request
 * @param {string} fetchSettings.method the method of the request
 * @param {string} fetchSettings.token should only be used for testing and unauthenticated requests
 */
const request = asyncPipe(liftedGetToken, liftedFetch, json);

Como você pode ver, tentei adicionar uma descrição JSDoc a ele. Mas quando eu o uso em qualquer lugar, meu editor, VSCode, não sugere seus parâmetros. Como você declara esses tipos de funções com o JSDoc? E como obtenho parâmetros para esta função funcionar com o Intellisense?


Respostas:


1

O VSCode usa o mecanismo TypeScript sob o capô, o que não é bom para inferir tipos de composições de funções e, como você viu, não reconhece uma composição sem pontos como uma declaração de função.

Se você quiser dicas de tipo, poderá especificar os argumentos para a função composta envolvendo uma função pontiaguda em torno dela.

Eu escreveria algo assim - note: os valores padrão tornam o JSDoc desnecessário para dicas de tipo, mas você pode manter o JSDoc para as descrições de qualquer maneira. Verifique também se as falhas causadas por fallbacks de valor padrão produzem mensagens de erro adequadas.

/**
  * http request with JSON parsing and token management.
  * @param {Object} fetchSettings the settings for the fetch request
  * @param {Object} fetchSettings.body the body of the request
  * @param {string} fetchSettings.route the URL of the request
  * @param {string} fetchSettings.method the method of the request
  * @param {string} fetchSettings.token should only be used for testing and unauthenticated requests
  */
const request = ({
  body = {},
  route = '',
  method = 'GET',
  token = ''
}) => asyncPipe(liftedGetToken, liftedFetch, json)({
  body, route, method, token
});

6

O VSCode tentará exibir o comentário da função anônima dentro asyncPipe. Se você adicionar um comentário JSDoc, poderá ver o comportamento:

const asyncPipe = (...fns) =>
  /**
   * My asyncPipe description
   * @param {Object} x Any object
   */
  x => fns.reduce(async (y, f) => f(await y), x);

const request = asyncPipe(liftedGetToken, liftedFetch, json);

exemplo

Infelizmente, no JSDoc, não há como substituir a documentação da função anônima como você estava tentando fazer. No entanto, você pode forçar sua intenção ao VSCode dessa maneira, observe que isso introduz uma chamada de função extra:

const doRequest = asyncPipe(liftedGetToken, liftedFetch, json);

/**
 * @method
 * @param {Object} fetchSettings the settings for the fetch request
 * @param {Object} fetchSettings.body the body of the request
 * @param {string} fetchSettings.route the URL of the request
 * @param {string} fetchSettings.method the method of the request
 * @param {string} fetchSettings.token should only be used for testing and unauthenticated requests
 */
const request = fetchSettings => doRequest(fetchSettings);

exemplo de solução

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.