Java 映射到 JSON 到 Typescript 映射

Posted 2023-03-13

【中文标题】Java 映射到 JSON 到 Typescript 映射

【英文标题】：Java Map to JSON to Typescript Map

【发布时间】：2017-05-02 12:08:25

【问题描述】：

在我的服务器端，我有一个包含 HashMap 的 Java 对象。我想将其序列化为 JSON，将其返回给我的 Angular2 客户端并将其用作那里的地图/字典。

课程如下：

public class FileUploadResult 
    String timestamp;
    String message;
    String status;
    HashMap<String, String> parameters;

    public FileUploadResult(String status, String message, String timestamp, HashMap parameters) 
        this.status = status;
        this.message = message;
        this.timestamp = timestamp;
        this.parameters = parameters;
    

这是我在客户端收到的 JSON：

"timestamp":"","message":"Test","status":"1","parameters":"myKey":"Value","mySecondKey":"Another Value"

这是我收到的 Angular2 http 调用：

this.http.post(this.uploadURL, formData).map((res:Response) => res.json() as FileUploadResult).catch(this.handleError); 

客户端上的 FileUploadResult 如下所示：

export class FileUploadResult 
    status: string;
    timestamp: string;
    message: string;
    parameters: Map<string, string>;

    constructor() 
        this.parameters = new Map<string, string>();
    

    addParameter(key: string, value: string) 
        this.parameters.set(key, value);
    

    getParameters() 
        return this.parameters;
    

通过在 http.map 调用中使用“as FileUploadResult”，我希望得到一个可以调用result.getParameters().get("myKey") 的对象。但这并没有发生。我得到一个未指定的对象，其中唯一有效的调用是result.parameters.myKey。有没有办法实现我想要的并将 JSON 对象转换为 FileUploadResult 包括 Angular2 映射？

【问题讨论】：

同***.com/questions/29758765/… ?

@RyanCavanaugh 不，不幸的是没有。我事先不知道钥匙。

【参考方案1】：

调用res.json()的结果是一个javascript对象，可以这样访问：

let json = res.json();
console.log(json["timestamp"]);
console.log(json.message);

在 typescript 中描述这样一个对象的方法是使用接口（或类型别名）：

interface JsonResponse 
    timestamp: string;
    message: string;
    status: string;
    parameters:  [name: string]: string ;

如果您想将此对象转换为您的类，您需要执行以下操作：

class FileUploadResult 
    status: string;
    timestamp: string;
    message: string;
    parameters: Map<string, string>;

    constructor(json: JsonResponse) 
        this.status = json.status;
        this.timestamp = json.timestamp;
        this.message = json.message;

        this.parameters = new Map<string, string>();
        Object.keys(json.parameters).forEach(key => 
            this.addParameter(key, json.parameters[key]);
        );
    

    addParameter(key: string, value: string) 
        this.parameters.set(key, value);
    

    getParameters() 
        return this.parameters;
    

(code in playground)

【参考方案2】：

 class FileUploadResult 
    parameters: Record<string, string> = ;

    addParameter(key: string, value: string) 
       this.parameters[key] = value;
    

你可以这样使用它

const abc = new FileUploadResult();
abc.addParameter('hi', 'hello');
console.log(abc.parameters);   // will log hi: "hello"

https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkt