Angular 類型檢查使用接口

Question

如何在 angular 中對返回的響應進行嚴格的類型檢查。

1.data.json 臨時文件 api 用途

[
  {
    "name": "Someone 1",
    "comment": "comment 1",
    "line": "line 1"
  },
  {
    "name": "Someone 2",
    "comment": "comment 2",
    "line": "line 2"
  },
  {
    "name": 3,
    "comment": "comment 3",
    "line": "line 3"
  }
]

2. 一個model接口

export interface Model {
  name: number;
  comment: string;
  line: string;
}

3.服務class app.service.ts

export class AppService {
  constructor(private _http: HttpClient) {}

  private api = "../api/data.json";

  loadData(): Observable<Model[]> {
    return this._http.get<Model[]>(this.api);
    //.pipe(tap((data) => console.log("All:" + JSON.stringify(data))));
  }

  loadSingle(): Observable<Model> {
    return this.loadData().pipe(map((data: Model[]) => data[2]));
  }
}

4.component class app.component.ts

export class AppComponent implements OnInit {

  myvarArray: Model[];

  myvarSingleton: Model;

  constructor(private _appService: AppService) {}

  ngOnInit() {
    this._appService.loadData().subscribe((data) => {
      this.myvarArray = data;
    });

    this._appService.loadSingle().subscribe((data) => {
      this.myvarSingleton = data;
      console.log(data.name + ":" + data.comment);
    });
  }
}

5.app.component.html

<h1>Printing obj data</h1>
<ul *ngFor="let data of myvarArray">
  <li>{{ data.name }} -- {{ data.line }}</li>
</ul>

<h1>Printing Single data</h1>
<span>{{ myvarSingleton.name }}</span>

什么是實現嚴格類型檢查的方法，以便 data.json 中的值符合接口中聲明的類型？ 我的觀點是，當數據返回到 app.component 時，名稱以數字形式給出，但在編譯期間它仍然不會顯示任何錯誤，如果有某種方法可以隱式地檢查這個而不是顯式驗證 function？

[編輯]另外，當在界面中明確定義了屬性（但數據在頁面上正確顯示）時，為什么我會收到 myvarSingleton.name 錯誤上的未定義屬性？ 為什么它被調用了3次？

控制台顯示錯誤，說名稱未定義

Answer 1

您無法使用 TypeScript 驗證 JSON.parse。 你只能告訴 TS 你的 JSON 應該是什么。 一種解決方法是創建一個驗證 function ，例如：

function isModel(arg: any): arg is Model {
  return arg 
  && (arg.name && typeof (arg.name) == 'string')
  && (arg && arg.comment && typeof (arg.comment) == 'string');
}

請注意，類型檢查是硬編碼的。 您可能希望將 JSON 轉換為 class 而不是使用接口，如果它能給您帶來更多優勢。