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

Question

我正在使用Angular 5开发一个Web应用程序.我有JSON文件,如下所示:

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

该文件存储在本地.我也有一个界面:

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

问题是我如何:

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

Answer 1

这个答案可以帮助某人，尽管它与 Typescript 4 有关。（Angular 5 支持 Typescript 2 ）。

示例 JSON 文件内容 (data.json)：

[
  {
    "Gender": "Male",
    "HeightCm": 171,
    "WeightKg": 96
  },
  {
    "Gender": "Male",
    "HeightCm": 161,
    "WeightKg": 85
  }
]

适当的tsconfig.json条目：

{
    "compilerOptions": {  
      "esModuleInterop": true
      "resolveJsonModule": true
    } 
}

将 JSON 内容读取到以下文件中的代码interface Person：

import data from './data.json';

interface Person{
    Gender: string,
    HeightCm: number,
    WeightKg: number
}

const personArray:Person[] = data as Person[];

Answer 2

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

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

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

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

演示

还添加了通配符模块定义中src/typings.d.ts来告诉编译器打字稿如何导入*.json:

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