使用TypeScript约束接口返回数据

枚举接口路径：

建立单独文件用来维护接口路径，便于统一管理并避免出现路径写错：

enum URL {
    ORDER_INFO:'/api/order/getOrder',
    ...
}

约束接口请求参数类型：

const getOrderInfo = (id:string,page:number,pageSize:number) => request...

约束响应数据相关：

首先需要定义公共返回数据类，通常存放的是接口成功或失败相关信息：

export interface ResponseCommonData {
    code:number,
    message:string,
    isOk:boolean,
    ...
};

定义后分析返回数据结构及字段类型，以list相关返回数据进行示例：

{
  
  "code": 200,
  "message": "操作成功",
  "isOk": true,
  "data": {
      "records": [
          {
            "id": "TESTID1234567",
            "domain": "056984264",
            "keyWords": "typeScript学习学习学习",
            "provinceCode": 150000,
            "isCurrent": true,
            "startDate": "2022-11-24",
            "endDate": "2022-11-24",
            "updateBy": '',
            "updateTime": "2022-11-24"
          },
          {
            "id": "TESTID1234567",
            "domain": "0569842642323",
            "keyWords": "javaScript学习学习学习",
            "provinceCode": 150001,
            "isCurrent": true,
            "startDate": "2022-11-25",
            "endDate": "2022-11-25",
            "updateBy": '',
            "updateTime": "2022-11-25"
        },
        {
            "id": "TESTID1234567",
            "domain": "056984264",
            "keyWords": "React学习学习学习",
            "provinceCode": 150002,
            "isCurrent": true,
            "startDate": "2022-11-26",
            "endDate": "2022-11-26",
            "updateBy": '',
            "updateTime": "2022-11-26"
      },
      ],
      "total": 3,
      "size": 20,
      "current": 1,
      "pages": 1
  }
  "timestamp": "1689923630953"
};

从list数据中拆出所需要循环数据records，并约束返回类型：

export interface OrderList {
    {
        "id": string,
        "domain": string,
        "keyWords": string,
        "provinceCode": number,
        "isCurrent": boolean,
        "startDate": string,
        "endDate": string,
        "updateBy": string,
        "updateTime": string
    }
};

定义存放循环体的 ’容器‘ 及循环体类型：

export type OrderContent = OrderList[];

最后约束所有返回字段类型，在进行约束的同时也要继承公共返回字段：

export interface OrderResponseData extends ResponseCommonData {
    "data": {
        "records":OrderContent,
        "total": number,
        "size": number,
        "current": number,
        "pages": number
    },
    "timestamp":string
};

使用定义过的格式类型对接口返回数据进行约束：

import {OrderResponseData} from '.../types'

const getOrderInfo = (id:string,page:number,pageSize:number) => request.get<OrderResponseData>(URL+`${id}/${page}/${pageSize}`);