Angular中如何定义Interface匹配登录接口JSON响应结构

你只需要按照返回JSON的层级结构，对应定义每个字段的类型即可，推荐拆分嵌套结构为独立子接口，后续复用更方便，完整的login-response.ts代码如下：

// 登录用户信息结构
interface LoggedInUser {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  userName: string;
}

// 登录返回的核心业务数据结构
interface LoginPayload {
  id: string;
  token: string;
  user: LoggedInUser;
  roles: string[];
  expires: string;
  refreshToken: string;
}

// 外层通用登录响应结构
export interface LoginResponse {
  data: LoginPayload;
  successful: boolean;
  message: string;
  statusCode: number;
}

说明 #

• 示例JSON里user.id字段的值漏写了字符串引号，属于书写疏漏，实际符合规范的接口返回中该UUID格式的ID为字符串类型，因此定义为string
• expires字段是ISO标准格式的时间字符串，如果你需要在代码中直接使用Date对象，可以在拿到接口响应后手动做转换，接口定义阶段匹配原始JSON返回类型即可
• roles是字符串数组类型，定义为string[]即可匹配返回的角色列表
• 如果你不想拆分多个子接口，也可以直接写内联类型，只是嵌套层级深时可读性较差，参考写法如下：

export interface LoginResponse {
  data: {
    id: string;
    token: string;
    user: {
      id: string;
      firstName: string;
      lastName: string;
      email: string;
      userName: string;
    };
    roles: string[];
    expires: string;
    refreshToken: string;
  };
  successful: boolean;
  message: string;
  statusCode: number;
}

内容的提问来源于stack exchange，提问作者Ayobamilaye