このjsonのようなデータのデータ型は何ですか？

Question

私はこの角度実装を通じてバックエンドにHTTPリクエストを作成しています。

まず、「@ angle/common/http」の{HttpClientModule}をapp.moduleにインポートしてから、それをインポート配列に追加して、アプリケーションの残りの部分で利用できるようにして、app.moduleを準備しました。

次に、HttpClientのgetメソッドを使用して、サーバーのデータにアクセスします。 これはゲームプランです。

質問は、サーバーによって返されるデータ型を決定することです。

コンポーネントにはこのコードがあります...簡潔にするために不要なものをカットします。

@Component(...) 

export class MyComponent implements OnInit { 

// results: string[]; // I am not sure about this 

constructor(private http: HttpClient) {} 

ngOnInit(): void { 

    url = 'http://example.com/authentication/get-username.php'; 

    http 
    .get<MyJsonData>(url) 
    .subscribe... 

} 

私の質問は、私は何を入力し、キャストする必要があり、それは言う... のですか？上記のコードで？

URLはこのような何かを返す： {"wordpress_username":"admin_joe","user_role":"admin"}

するか、どのユーザーがログインしていない場合は、この

今

{"wordpress_username":"","user_role":""}

が、ここでは、我々はAAを得たbackgrond

もう少し{"x"： "y"、 "j"： "k"}のような形式 これはjson文字列です。しかし、それもオブジェクトです

これは私の混乱が始まるところです。

このためのインターフェイスを構築する方がよいでしょうか？ そうなら、インターフェイスはどのように見えますか？

Answer 1

Typescriptを使用すると、強い型指定もTypescriptのレベルで使用されます。そのためのタイプを持つ方が良いです。

どちらの場合も、2つのプロパティwordpress_usernameとuser_roleを持つオブジェクトの形状が同じです。 1つのプロパティのみを持つレスポンスを持つことができる場合、あなたのインターフェースはまた、この

export interface MyJsonData { 
    wordpress_username: string, 
    user_role: string 
} 

のように見えることができます、あなたは、プロパティ名の末尾に?を追加、それらをオプションにすることができます

export interface MyJsonData { 
    wordpress_username?: string, 
    user_role?: string 
}