jsonスキーマファイルをtypescriptに含める

Question

私は、角型ツールを使用してTypescriptでAngular 2アプリを作成しています。 バックエンドAPI用のJSONスキーマがたくさんあるので、それらのスキーマをスキーマバリデーターに渡すことができます。 .jsonファイルをインクルードする最良の方法は何ですか。私はそれらをtypescriptの変数として参照できます。また、angle-cliでビルドを行うと、それらを適切にバンドルすることができますか？

私の最初の考えは、カスタムモジュールを作成し、各スキーマをconstとしてエクスポートすることでした。私はそれが可能であるかどうかわからないし、ファイルを参照する方法の例の構文を見つけることができませんでした。

これは私のコード例です。唯一の問題は、スキーマファイルの内容を自分のtypesrciptにコピーしなければならないことでした。元のスキーマファイルを参照できるようにしたい。

import { Injectable } from "@angular/core"; 
import { Http, Response } from "@angular/http"; 

import { Observable } from "rxjs/Observable"; 
import { WlanStatus } from "./wlan-status"; 
import { JsonValidatorService } from "../../json-validator.service"; 

//import WlanStatusSchema from "../../../api/app/plugins/wifi/schemas/getStatus.json"; 
const wlanStatusSchema = 
{ 
    "type": "object", 
    "properties": { 
     "result": { 
      "type": "object", 
      "properties": { 
       "cardState": { 
        "type": "integer" 
       }, 
       "profileName": { 
        "type": "string" 
       }, 
       "clientMAC": { 
        "type": "string" 
       }, 
       "clientIP": { 
        "type": "string", 
        "format": "ipv4" 
       }, 
       "clientName": { 
        "type": "string" 
       }, 
       "AP_MAC": { 
        "type": "string" 
       }, 
       "AP_IP": { 
        "type": "string" 
       }, 
       "APName": { 
        "type": "string" 
       }, 
       "Channel": { 
        "type": "integer" 
       }, 
       "RSSI": { 
        "type": "integer" 
       }, 
       "bitRate": { 
        "type": "integer" 
       }, 
       "txPower": { 
        "type": "integer" 
       }, 
       "DTIM": { 
        "type": "integer" 
       }, 
       "beaconPeriod": { 
        "type": "integer" 
       }, 
       "SSID": { 
        "type": "string" 
       }, 
       "currentRadioMode": { 
        "type": "integer" 
       } 
      }, 
      "required": [ 
       "cardState", 
       "profileName", 
       "clientMAC", 
       "clientIP", 
       "clientName", 
       "AP_MAC", 
       "AP_IP", 
       "APName", 
       "Channel", 
       "RSSI", 
       "bitRate", 
       "txPower", 
       "DTIM", 
       "beaconPeriod", 
       "SSID", 
       "currentRadioMode" 
      ] 
     } 
    }, 
    "required": [ 
     "result" 
    ] 
}; 

@Injectable() 
export class WlanService 
{ 
    private getStatusUrl = 'app/getWlanStatus'; // URL to web API 

    constructor(private http: Http, private validator: JsonValidatorService) { } 

scan(): void 
{ 
    console.log("Scanning for APs...") 
} 

getStatus(): Observable<WlanStatus> 
{ 
    return this.issueRequest(this.getStatusUrl, wlanStatusSchema); 
} 

private issueRequest(requestUrl: string, schema: any): Observable<Object> 
{ 
    return this.http.get(requestUrl) 
     .map((res: Response) => 
     { 
      let body = res.json(); 
      let valid = this.validator.validate(schema, body.data); 
      if (!valid) 
      { 
       throw (new TypeError("Not a valid response: " + JSON.stringify(this.validator.getErrors()))); 
      } 

      return body.data.result; 
     }) 
     .catch(this.handleError); 
} 

private handleError(error: Response | any) 
{ 
    // In a real world app, we might use a remote logging infrastructure 
    let errMsg: string; 
    if (error instanceof Response) 
    { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else 
    { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 
} 

Answer 1

私はangular-cliを使用しており、webpackを使用しているため、require（）関数を使用して問題を解決できました。 Webpackはこの方法で.jsonファイルを適切にバンドルします。

私はすべての私のスキーマ、WLAN-schema.tsインポートするtypescriptファイルを作成しました：私のwlan.service.tsでそれを使用する

export const WlanStatusSchema = require("../../../../api/app/plugins/wifi/schemas/getStatus.json"); 

を：どのように私

import * as schema from "./wlan-schema"; 

this.validator.validate(schema.WlanStatusSchema, apiResp); 

Answer 2

スキーマの検証に使用するクラスファイルを設定しないでください。次に、あなたのビジュアルスタジオはあなたが作成するようなエラーを表示します。

何かのように 輸出クラスのヒーロー{ id：number; 名前：文字列; }

Answer 3

バックエンドAPIにアクセスできると仮定すると、新しいAPIポイントを追加してJSONファイルを取得できます。その後、Angularアプリケーションでは、HTTP Clientを使用してAPIポイントを使用できるようになります。それで、JSONファイルの内容を取得し、それをtypescriptの変数に割り当てることができます。

Answer 4

これは、それをやった。これは登録フォームの例です。

タイプ（JSONSchema4）に@types/json-schemaを使用しました。

register.component.ts

... 
import * as registerSchema from '../../../../shared/schemas/api/create-user.json'; 
import {JSONSchema4} from 'json-schema'; 
... 
export class RegisterComponent { 
    registerSchema: JSONSchema4 = registerSchema; 
    constructor(){ 
     console.log(registerSchema.$schema); 
    } 
} 

typings.d.ts

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