本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

在编写 JavaScript 项目的时候想要有代码提示，就可以使用 JSDoc 来给 JS 增加类型提示，下面我使用 uniapp + vue2 封装一个请求方法来增加提示

给使用JS封装的公共请求方法增加类型提示

在项目开发的过程当中，总避免不了需要封装公共的请求方法，在使用 uniapp 开发的时候，可以讲请求封装成如下的代码：

// request.js
const request = (config) => {
  config.header = {
    ...config.header,
  }

  if (!config.data) {
    config.data = {}
  }

  return new Promise(function (resolve, reject) {
    uni.request({
      ...config,
      success: (result) => {
        resolve(result)
      },
      fail: (err) => {
        reject(err)
      },
    })
  })
}

export default request

这个时候在 api 里面使用是没有类型提示的，那么就可以通过给代码增加 JSDoc 的方式来增强代码提示，在 uniapp 官方提供的ts type 当中，我们可以得到如下的 d.ts，这里是基于 HbuilderX 创建的项目，在项目目录下面新增 types 文件夹，将代码复制到文件中

// uni.d.ts
interface RequestOptions {
  /**
   * 资源url
   */
  url: string;
  /**
   * 请求的参数
   */
  data?: string | AnyObject | ArrayBuffer;
  /**
   * 设置请求的 header，header 中不能设置 Referer。
   */
  header?: any;
  /**
   * 默认为 GET
   * 可以是：OPTIONS，GET，HEAD，POST，PUT，DELETE，TRACE，CONNECT
   */
  method?: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT';
  /**
   * 超时时间
   */
  timeout?: number;
  /**
   * 如果设为json，会尝试对返回的数据做一次 JSON.parse
   */
  dataType?: string;
  /**
   * 设置响应的数据类型。合法值：text、arraybuffer
   */
  responseType?: string;
  /**
   * 验证 ssl 证书
   */
  sslVerify?: boolean;
  /**
   * 跨域请求时是否携带凭证
   */
  withCredentials?: boolean;
  /**
   * DNS解析时优先使用 ipv4
   */
  firstIpv4?: boolean;
  /**
   * 成功返回的回调函数
   */
  success?: (result: RequestSuccessCallbackResult) => void;
  /**
   * 失败的回调函数
   */
  fail?: (result: GeneralCallbackResult) => void;
  /**
   * 结束的回调函数（调用成功、失败都会执行）
   */
  complete?: (result: GeneralCallbackResult) => void;
}

接着对封装的请求进行改造,如下：

/**
 * 公共请求方法
 * @param {Omit<RequestOptions,'success'|'fail'|'complete'>} config
 * @returns {Promise<any>}
 */
const request = (config) => {
  config.header = {
    ...config.header,
  }

  if (!config.data) {
    config.data = {}
  }

  return new Promise(function (resolve, reject) {
    uni.request({
      ...config,
      success: (result) => {
        resolve(result)
      },
      fail: (err) => {
        reject(err)
      },
    })
  })
}
export default request

新建一个 API 请求方法时即可看到如下的提示：