Comment générer JSDoc pour la fonction `pipe`d ES6

10

J'ai une fonction de style ES6 qui est définie à l'aide de la composition de fonction avec 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);

Comme vous pouvez le voir, j'ai essayé d'y ajouter une description JSDoc. Mais quand je l'utilise n'importe où, mon éditeur, VSCode, ne suggère pas ses paramètres. Comment déclarez-vous ces types de fonctions avec JSDoc? Et comment puis-je obtenir des paramètres pour que cette fonction fonctionne avec Intellisense?

J. Hesters
la source

Réponses:

1

VSCode utilise le moteur TypeScript sous le capot, qui n'est pas bon pour inférer des types à partir de compositions de fonctions, et comme vous l'avez vu, ne reconnaît pas une composition sans point comme une déclaration de fonction.

Si vous souhaitez des indications de type, vous pouvez spécifier les arguments de la fonction composée en enveloppant une fonction pointée autour d'elle.

Je l'écrirais quelque chose comme ceci - note: les valeurs par défaut rendent le JSDoc inutile pour les indications de type, mais vous voudrez peut-être garder le JSDoc pour les descriptions, de toute façon. Assurez-vous également que les échecs causés par les replis de valeurs par défaut produisent une messagerie d'erreur adéquate.

/**
  * 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
});
Eric Elliott
la source
6

VSCode essaiera d'afficher le commentaire de la fonction anonyme à l'intérieur asyncPipe. Si vous ajoutez un commentaire JSDoc à l'intérieur, vous pouvez voir le comportement:

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);

exemple

Malheureusement, il n'y a aucun moyen dans JSDoc de remplacer la documentation de la fonction anonyme comme vous essayiez de le faire. Vous pouvez cependant forcer votre intention à VSCode comme ceci, notez que cela introduit un appel de fonction supplémentaire:

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);

exemple de solution

A1rPun
la source