Angular 5 中从本地文件到 Typescript 数组的 JSON 数组

我正在使用 Angular 5 开发一个网络应用程序。我有 JSON 文件，如下所示：

[
  {
        "id": 0,
        "title": "Some title"
  },
  {
        "id": 1,
        "title": "Some title"
  },
  ...
]

该文件存储在本地。我也有一个界面：

export interface Book {
  id: number;
  title: string;
}

问题是我该如何：

1. 从文件中获取数据？
2. 创建一个类型的数组Book[]从这个数据？

您可以使用以下命令加载文件import:

import data from 'path/to/data.json';

并将其分配给类型数组Book[]:

@Component({...})
class Foo {
   books: Book[] = data;
}

demo https://stackblitz.com/edit/angular-hcanua?file=src%2Fapp%2Fhello.component.ts

还添加一个通配符模块定义 https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations in src/typings.d.ts告诉 TypeScript 编译器如何导入*.json:

declare module "*.json" {
  const value: any;
  export default value;
}