javascript - Angular 2 类和大型 json 文件

标签 javascript json angular typescript ecmascript-6

目前,我正在与之交互以请求 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 数据,然后将其解析为特定类的最佳方式?或者是我没有想到的更好的东西?

最佳答案

您可以使用接口(interface)来表示您收到的 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 };
}

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

<小时/>

编辑

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

如果接口(interface)是:

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'

关于javascript - Angular 2 类和大型 json 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41367505/

相关文章:

javascript - 如何有效地构建这个数组?

javascript - 我如何使用 Enter 而不是 Tab 从一个输入移动到另一个输入

php - SQL语法错误&组合字符串错误

ruby-on-rails - 使用 Postman 和 Rails 时出现意外的 '<' 错误

angular - 关于 Angular 11 中的多路由器的问题

php - 为我的网站创建图表

javascript - IE 中的 CSS 文本框呈现问题

jquery - 使用新属性扩展 json 模型

angular - 如何在 Angular 5 中从 http 重定向到 https?

javascript - Moment.js 在 Mozilla Firefox 中显示无效日期