如何在Angular8及以上版本中为SpringBoot返回的嵌套JSON定义TypeScript模型类

Angular中针对接口响应定义类型模型，优先使用interface做静态类型校验即可，嵌套结构按层级拆分定义即可，你可以按照以下步骤实现：

1. 定义内层用户数据模型 #

新建user.model.ts文件，定义data数组中每个用户对象的结构：

export interface User {
  userid: string;
  password: string;
  role: string;
  sessionid: string;
  sessiontype: string;
  status: string | null;
}

按照要求所有字段均定义为string类型，其中status字段可能为null，所以额外增加了null类型做兼容。

2. 定义外层通用响应模型 #

新建api-response.model.ts文件，定义完整的响应包结构：

import { User } from './user.model';

export interface ApiResponse {
  message: string;
  status: string;
  data: User[];
}

3. 使用示例 #

在你的HTTP请求服务中，可以直接指定返回值类型为ApiResponse即可获得完整的类型提示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ApiResponse } from './models/api-response.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<ApiResponse> {
    return this.http.get<ApiResponse>('/你的实际接口地址');
  }
}

如果后续有其他接口也使用相同的外层响应结构，只需要把ApiResponse改成泛型即可适配不同的data类型：

// 泛型版本通用响应模型
export interface ApiResponse<T> {
  message: string;
  status: string;
  data: T;
}

// 使用时传入具体的data类型即可，比如用户列表接口：
Observable<ApiResponse<User[]>>

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