Come generare JSDoc per la funzione `pipe`d ES6


10

Ho una funzione in stile ES6 che è definita usando la composizione della funzione con 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);

Come puoi vedere, ho provato ad aggiungere una descrizione JSDoc. Ma quando lo uso ovunque il mio editor, VSCode, non mi suggerisce i suoi parametri. Come dichiarate questo tipo di funzioni con JSDoc? E come posso ottenere parametri per questa funzione con Intellisense?


Risposte:


1

VSCode utilizza il motore TypeScript sotto il cofano, che non è buono per inferire i tipi dalle composizioni di funzioni e, come hai visto, non riconosce una composizione priva di punti come una dichiarazione di funzione.

Se si desidera un suggerimento sul tipo, è possibile specificare gli argomenti per la funzione composta avvolgendola attorno ad una funzione appuntita.

Lo scriverei in questo modo - nota: i valori predefiniti rendono JSDoc non necessario per i suggerimenti sui tipi, ma potresti voler comunque conservare JSDoc per le descrizioni. Inoltre, assicurarsi che gli errori causati da fallback di valore predefinito producano messaggi di errore adeguati.

/**
  * 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

VSCode proverà a visualizzare il commento della funzione anonima all'interno asyncPipe. Se aggiungi un commento JSDoc al suo interno puoi vedere il 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);

esempio

Sfortunatamente in JSDoc non è possibile ignorare la documentazione della funzione anonima come si stava tentando di fare. Puoi tuttavia forzare il tuo intento su VSCode in questo modo, tieni presente che questo introduce una chiamata di funzione 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);

esempio di soluzione

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.