将对象投射到打字稿中的模型答案

【问题标题】：Cast an object to a model in typescript将对象投射到打字稿中的模型
【发布时间】：2019-02-24 05:43:34
【问题描述】：

在下面的示例中，我有一个像 lst 这样的 json，我想将它映射到 MyModel。

interface MyModel { 
    id: number;
    isRequired : boolean;
    ,...
}

let lstByModel: Array<MyModel> = [];

// lst comes from API
let lst:any[] = [
    {
        "id":"10",
        "isRequired":"false"        
    }
];

lstByModel = lst; // How to map lst to MyModel (lstByModel)?

console.log(lstByModel); // it shows { id : "10" , isRequired : "false"} but I need { id : 10, isRequired : false } How can I do that?

提前致谢。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

Typescript 中的types 或iterfaces 仅在编译时。因此您的lst 不会自动转换为任何其他type。

您需要手动将字符串映射到数字。你的情况

lstByModel = lst.map(lstItem=>{
    return {
         id:parseInt(lstItem.id), // manually changing string to number
        isRequired: lstItem.isRequired=="true" //parsing boolean
    }
})

【讨论】：

感谢您的回答。如何从接口获取属性类型？（例如：从接口获取number为id设置）
回答完毕后关闭此问题，再发布一个问题

【解决方案2】：

你可以使用Object.assign()

Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

【讨论】：

【解决方案3】：

如果您可以为模型使用类而不是接口，那么这里的 Object.assign() 模式可能适合您。对于其他 api 或 io 相关的翻译/功能也是一个很好的模式。

abstract class ApiLoadable {
 static fromObject<T extends ApiLoadable>(this: { new(): T }, obj: object): T {
   return Object.assign(new this(), obj);
 }
}

class MyModel extends ApiLoadable {
  id: number;
  isRequired : boolean;
}

const json = `{ "id": 10, "isRequired": false }`;
const model = MyModel.fromObject(JSON.parse(json));

请注意，静态方法中存在一些“this”参数技巧——这让静态方法始终根据关于该主题的this question 创建正确的子类实例

【讨论】：

【解决方案4】：

let lst:any[] = [ { "id":"10", "isRequired":"false" } ];

如您的 json 格式所示，id 和 isRequired 字段是字符串类型。

因此您需要做的是，使用 foreach 循环将 id 转换为数字并将 isRequired 转换为布尔值。

【讨论】：