javascript - 如何从 TypeScript 中的匿名对象轻松创建强类型对象？

Question

我有一些包含匿名对象的 JSON 进入我的客户端。是否有一些内置机制或外部库可以将这些匿名对象转换为强类型的 TypeScript 对象？有像 AutoMapper 这样的东西吗？

我的对象是复杂类型，具有复杂类型作为属性。

Answer 1

获取一些示例数据并将其放入 .ts 文件中：

var people = [
    {
        "name": "bob", "height": 150, "pets": [{ "name": "spot", "species": "dog" }]
    },
    {
        "name": "jane", "height": 142, "pets": [{ "name": "lucy", "species": "cat" }]
    }
];

跑tsc --declaration yourFile.ts

现在您将拥有yourFile.d.ts：

declare var people: {
    "name": string;
    "height": number;
    "pets": {
        "name": string;
        "species": string;
    }[];
}[];

替换declare var people:为interface Person，删除尾随[]，并（可选）删除引号：

interface Person {
    name: string;
    height: number;
    pets: {
        name: string;
        species: string;
    }[];
}

Answer 2

最近我在 TypeScript / JavaScript 中为这个场景创建了一个 AutoMapper 实现。我已将代码放在 GitHub ( AutoMapperTS )。您也可以使用automapper-ts NPM 包或automapper-ts Bower 包直接使用该库。

该库几乎完全记录在案。此外，已经有相当多的 Jasmine 单元测试可用（代码覆盖率超过 90%）。他们应该为您提供一些需要的解释。

我希望这个库能满足你的需要。如果您有任何问题和/或意见，请不要犹豫与我联系！

快乐编码！

Answer 3

我也在寻找一种将 json 数据从 Web 服务转换为接口的简单方法。没有找到我需要的，但这是我的解决方案。注意到我添加了一个“宠物”界面，并在您的 json 中添加了另一个宠物。还必须将匿名对象指定为“任何”。您可以将其剪切/粘贴到 TypeScript 游乐场 ( http://www.typescriptlang.org/play/index.html ) 以查看结果。希望这可以帮助。

let header = document.createElement("div");
header.textContent = "Test";
document.body.appendChild(header);

var people:any = [
    {
        "name": "bob", "height": 150, "pets": [{ "name": "spot", "species": "dog" }, {"name" : "violet", "species": "shark"}]
    },
    {
        "name": "jane", "height": 142, "pets": [{ "name": "lucy", "species": "cat" }]
    }
];

interface Pet {
    name: string;
    species: string;
}
interface Person {
    name: string;
    height: number;
    pets: Array<Pet>
}

class Foo {
    convertToObject = (person: Person) => person;
}


var person = new Foo().convertToObject(people[0]);

let div = document.createElement("div");
div.textContent = `hey ${person.name} I see you have ${person.pets.length} pet`;
document.body.appendChild(div);