TypeScript- 对于对象键名（包括函数键值）不确定的接口，可以使用字符串索引的形式

AXIOS树配置项

有一个需求，通过JSON数据，第一层是对应的页面对象（比如是用户页面），第二层是该页面的API请求名（比如用户的增删改查），第三层是该API的配置信息（比如，method，url…这里主要跟你的封装有关）

const api_obj: IApiObj = {
  // 登陆
  loginPage: {
    login: {
      method: 'post',
      url: '/server/login'
    },
    loginPc: {
      method: 'post',
      url: '/server/login/loginPc'
    },
    refresh: {
      method: 'post',
      url: '/server/login/refresh'
    }
  },
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

AXIOS对象树

由此生成一个对应的AXIOS对象树，如下：

问题解析：

1. 键名（对象名）不确定

对象名不确定，可以通过字符串索引的形式

import type { AxiosRequestConfig, AxiosResponse } from 'axios'
export interface IHttp {
  [key: string]: {
    [key: string]: (
      // 传递的Data
      params?: IApi_objParams
    ) => Promise<AxiosResponse>
  }
}
1
2
3
4
5
6
7
8
9