Angular 2 类和大型 json 文件

Posted 2023-03-13

【中文标题】Angular 2 类和大型 json 文件

【英文标题】：Angular 2 Classes, and large json file

【发布时间】：2017-05-13 01:24:43

【问题描述】：

目前，我正在与之交互以请求 JSON 的系统基本上会返回一个包含大量数据的批处理文件。在我的情况下，尝试遵循 Angular 2 (Heros) 教程的规范来定义一个类，然后定义将返回的每个属性似乎几乎是不可能的。

我正在尝试寻找解决方案，因为我认为这不是处理它的正确方法：

export class Example 
  prop1: number,
  prop2: string,
  prop3: 
    prop : string,
    prop : string,
    prop : string,
    prop : string,
    prop : string,
    prop : [
      prop : string,
      prop : string,
      prop : string,
      prop : string,
      prop : string,
    ];
  ,
  prop : string,
  prop : string,
  prop3: 
    prop : string,
    prop : string,
    prop : string,
    prop : string,
    prop : string,
    prop : [
      prop : string,
      prop : string,
      prop : string,
      prop : string,
      prop : [
        prop : string,
        prop : string,
        prop : string,
        prop : string,
        prop : string,
    ];,
    ];
  ,

或者是实际请求 JSON 数据，然后将其解析为特定类的最佳方式？或者更好的东西我什至没有想到？

【参考方案1】：

您可以使用接口来表示您收到的 json。

您可以显式声明每个属性：

interface Prop3 
    prop1: string;
    prop2: string;
    prop3: string;
    prop4: string;
    prop5: string;
    prop6: Prop3[];


interface Example 
    prop1: number;
    prop2: string;
    prop3: Prop3;

你也可以使用indexable interfaces:

interface Example 
    prop1: number;
    prop2: string;
    prop3:  [key: string]: string ;

可索引方法的问题是编译器无法告诉您是否使用了正确的属性名称。

---

编辑

如果您不明确并使用索引接口，那么编译器将无法知道哪些键是正确的，哪些是错误的。 例如，假设我从服务器接收到一个 json 数据对象，其中包含以下字符串：firstName、lastName、username。

如果接口是：

interface Data 
    [key: string]: string;


let data: Data; // from server
console.log(data["firstName"]);
console.log(data["firstname"]); // ok but shouldn't be 
console.log(data["dontExists"]); // also ok but shouldn't

另一方面：

interface Data 
    firstName: string;
    lastName: string;
    username: string;


let data: Data; // from server
console.log(data.firstName);
console.log(data.firstname); // error: Property 'firstname' does not exist on type 'Data'
console.log(data.dontExists); // error: Property 'dontExists' does not exist on type 'Data'

【讨论】：

关于明确，只是为了澄清我仍然需要写（在我的情况下）1000x 行来定义返回的内容仍然正确吗？

确实如此。检查我修改后的答案。您需要问问自己，您是喜欢编写（或者自动化？）这个接口并获得类型安全，还是不喜欢。

感谢您的编辑，它确实帮助我更好地理解如何处理这个问题。关于自动化接口，您是否建议一些基本逻辑说...如果（对象中的对象）然后接口 X，Y，Z？事物的类型？

不，我的意思是使用自动化工具为您制作，我从未使用过任何工具，但您可以试试这个：json2ts.com 或搜索更多。

如果我能对你的评论点赞 5000 次，我会的。感谢 Nitzan 的提示！