求一个TypeScript中interface的定义

Question

我想对现有浏览器端ajax请求做一次封闭，后端接口定义使用Object定义的形式出现，在最终项目中使用时统一转换为fetch的方法。

// import qs from 'qs';

interface RequestOptions {
    url: string;
    type: 'post' | 'get' | 'POST' | 'GET';
}
interface ApiList {
    [key: string]: RequestOptions;
}
const apiList: ApiList = {
    getData: {
        url: '/api/get',
        type: 'post',
    },
    getUser: {
        url: '/api/user',
        type: 'POST',
    },
};

function createFetch(config: RequestOptions) {
    return function (params: any): Promise<any> {
        let url: string = config.url;
        // if (config.type.toLowerCase() === 'get') {
        //     config.url += (config.url.includes('?') ? '&' : '?') + qs.stringify(params);
        // }

        return fetch(url, {
            body: JSON.stringify(params),
            headers: {
                'content-type': 'application/json'
            },
            method: config.type.toUpperCase(),
        }).then(response => response.json());
    }
}

class Api {
    public api;
    constructor() {
        for (const key in apiList) {
            this.api[key] = createFetch(apiList[key]);
        }
    }
}

const { api } = new Api();
api.getData({ a: 22 });

以上在class Api中的api变量最终是一个方法的集合对象，形式如：

api = {
  getData: function(params){},
  getuser: function(params){},
}

api的TS类型定义我一直没能正确的写出，在VsCode中无法正常的提示api所具有的方法名以及定义说明，不知有哪位高手能指点下。

Answer 1

依照你的, 写了一下

// import qs from 'qs';

interface RequestOptions {
  url: string;
  type: 'post' | 'get' | 'POST' | 'GET';
}

type FetchTask = (...args: any[]) => Promise<any>;

type ApiService<T> = { [K in keyof T]: FetchTask };

const apiList = {
  getData: {
    url: '/api/get',
    type: 'post',
  },
  getUser: {
    url: '/api/user',
    type: 'POST',
  },
};

function createFetch(config: RequestOptions) {
  return function(params: any): Promise<any> {
    let url: string = config.url;
    // if (config.type.toLowerCase() === 'get') {
    //     config.url += (config.url.includes('?') ? '&' : '?') + qs.stringify(params);
    // }

    return fetch(url, {
      body: JSON.stringify(params),
      headers: {
        'content-type': 'application/json',
      },
      method: config.type.toUpperCase(),
    }).then(response => response.json());
  };
}

class Api<T extends object> {
  public api: ApiService<T>;
  constructor(apiConfig: T) {
    Object.keys(apiConfig).forEach(key => {
      this.api[key] = createFetch(apiList[key]);
    });
  }
}

const { api } = new Api(apiList);