如何将接口应用于 HTTP 响应

Question

在我的应用中，我收到来自 API 的响应，该响应具有以下模式。

export interface IApiResponseBody<T = any> {
    Error?: string;
    Message?: string;
    RowsAffected?: number;
    Success?: boolean;
    Data?: T;
    RowCount?: number;
}

我没有问题将接口分配给响应，然后我可以访问响应中的元素。我遇到的问题是当我尝试通过T 为Data 分配接口时，就像

let myData: IApiResponseBody<IPerson>  = {
    Success: true,
    Error: "",
    Message: "",
    RowsAffected: 9,
    Data: [{name: 'Steve', age: 26, gender : 'male'},
            {name: 'Susan', age: 21, gender : 'female'},
            {name: 'SteveFrank', age: 29, gender : 'male'}]}

无论我使用 Data 中的数组还是简单的 Doc，都会出现错误。

TSError：⨯ 无法编译 TypeScript：index.ts:9:5 - 错误 TS2559： 键入'{名称：字符串；年龄：数字；性别：字符串； }[]' 没有 与“IPerson”类型相同的属性。

9 数据：[{name：'Steve'，年龄：26，性别：'male'}， ~~~~

那么我如何将接口应用到我的Data 元素，无论它是文档数组还是简单文档。

这是 Repl.it 上上述代码的链接

Sample Playground

Answer 1

因为，您想要访问可能不存在的数据。因为数据？：T[]，是数据的简写：T[] |不明确的。这意味着 Data 可能包含 T[] 的值，或者它可能包含未定义的值。

所以，当你调用 myData.data[0].name 时，它​​的值可能是 steve 或者你想调用未定义数据的第一个对象的 name 属性，这是完全不可接受的，所以错误投掷。

解决方案 1：

您可以先检查数据是否存在，然后打印对象或对象的属性。

if (myData.Data) {
  console.log(myData.Data[0].name)
}

解决方案 2

或者说一定有数据，把界面中的?去掉。

export interface IApiResponseBody<T = any> {
  Error?: string;
  Message?: string;
  RowsAffected?: number;
  Success?: boolean;
  Data: T[];
  RowCount?: number;
}

直播解决方案：Repl.it

Answer 2

你可以试试：

export interface IApiResponseBody<T = any> {
    Error?: string;
    Message?: string;
    RowsAffected?: number;
    Success?: boolean;
    [key: string]?: T | T[];
    RowCount?: number;
}

和：

let myData: IApiResponseBody<IPerson>  = {
    Success: true,
    Error: "",
    Message: "",
    RowsAffected: 9,
    Data: [{name: 'Steve', age: 26, gender : 'male'}] // or {name: 'Steve', age: 26, gender : 'male'}
    }

Answer 3

Data? 必须是 T 类型的 Array，或者如果您想允许 Array 或单个 Object，请使用 union。

export interface IApiResponseBody<T = any> {
  Error?: string;
  Message?: string;
  RowsAffected?: number;
  Success?: boolean;
  Data?: T | T[];
  RowCount?: number;
}

export interface IPerson {
  name?: string;
  gender?: string;
  age?: number;
}

现在您可以这样做：

let myData: IApiResponseBody<IPerson> = {
  Success: true,
  Error: "",
  Message: "",
  RowsAffected: 9,
  Data: [
    {name: 'Steve', age: 26, gender: 'male'},
    {name: 'Susan', age: 21, gender: 'female'},
    {name: 'SteveFrank', age: 29, gender: 'male'}
  ]
}

或：

let myData: IApiResponseBody<IPerson> = {
  Success: true,
  Error: "",
  Message: "",
  RowsAffected: 9,
  Data: {name: 'Steve', age: 26, gender: 'male'}
}