如何在对对象进行类型转换时同时解析对象内的字符串？

问题描述 #

我定义了如下自定义Model：

class Person {
    age: number;
    personality: Personality;
}

class Personality {
    shy: boolean;
    moody: boolean;
}

调用API获取结果时，收到的响应结构为：

{
    "age": 20,
    "personality": "{\"shy\": \"true\",\"moody\":\"false\"}"
}

我目前通过以下代码将响应赋值给变量：

response.body().personality = JSON.parse(response.body().personality)
const person = response.body() as Person

其中personality是需要直接解析的字符串，请问如何避免编写response.body().personality = JSON.parse(response.body().personality)这句代码？

解决方案 #

推荐这几种方式来避免手动写那行解析代码：

1. 封装转换函数

写个专门的函数把API响应转成Person类型，之后直接调用就行：

function toPerson(responseBody: any): Person {
    return {
        ...responseBody,
        personality: JSON.parse(responseBody.personality) as Personality
    };
}

// 使用示例
const person = toPerson(response.body());

2. 给Person类加构造函数处理解析

修改Person的构造函数，实例化时自动搞定personality的解析：

class Person {
    age: number;
    personality: Personality;

    constructor(rawData: { age: number; personality: string }) {
        this.age = rawData.age;
        this.personality = JSON.parse(rawData.personality) as Personality;
    }
}

// 使用示例
const person = new Person(response.body());

3. 加类型守卫做严谨校验

如果需要确保解析后的personality符合类型，可以加个类型守卫函数：

function isPersonality(obj: any): obj is Personality {
    return typeof obj.shy === 'boolean' && typeof obj.moody === 'boolean';
}

function parsePerson(rawData: any): Person {
    const parsedPersonality = JSON.parse(rawData.personality);
    if (!isPersonality(parsedPersonality)) {
        throw new Error('Personality格式不符合要求');
    }
    return {
        age: rawData.age,
        personality: parsedPersonality
    };
}

// 使用示例
const person = parsePerson(response.body());

4. 用HTTP客户端拦截器自动处理

如果项目用了Axios这类工具，可以加响应拦截器，全局自动解析指定字段：

import axios from 'axios';

// 添加响应拦截器
axios.interceptors.response.use(res => {
    if (res.data?.personality) {
        res.data.personality = JSON.parse(res.data.personality);
    }
    return res;
});

// 之后请求API时直接拿类型化的数据
const { data: person } = await axios.get<Person>('/api/person');

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