入れ子になったオプジェクトの型の指定方法と取り出し方法がわからない

Question

宜しくお願い致します。

下記のようなデータがあり、title部分のプロパティを取得したいと考えております。
その際、型の設定方法がわかりません。

[
	{
		"id": 25,
		"date": "2020-01-07T15:02:34",
		"title": {
			"rendered": “テストです”
		}
	}
[

HTMLでは下記のような取り出しを想定しております。

<p>{{post.id}}</p>  // 値の取得に成功
<p>{{post.date | date: "yyyy年MM月dd日"}}</p>  // 値の取得に成功
<p>{{post.title.rendered}}</p>  // ここがうまくいっていない

TSファイル上でtitleの型をどのように指定をすれば上記のHTMLでtitleの値を取得できるでしょうか。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-article',
  templateUrl: './article.page.html',
  styleUrls: ['./article.page.scss'],
})
export class ArticlePage implements OnInit {

    id:number;
    post:  {
      id: number;
      date: string; 
　　   title.rendered :string;       // この書き方だとエラーになってしまう
  } = {
      id: null,
      date: null,
      title.rendered :null,      // この書き方だとエラーになってしまう
  };

  constructor(public route: ActivatedRoute, public http: HttpClient,
              public loadingController: LoadingController,
  ) { }

  ngOnInit() {
      this.route.paramMap
        .subscribe((params: ParamMap) => {
            this.id = parseInt(params.get('articleId'),10);
        });
  }

  async ionViewDidEnter() {
    const loading = await this.loadingController.create({
      message: 'Loading...',
    });
      await loading.present();
    this.http.get <{
        id: number;
        date: string;
        title.rendered: string;   // この書き方だとエラーになってしまう
    } >('https://apiのURL')      //  上に記載のデータが取得できる
      .subscribe(data => {
         
        this.post = data;
        loading.dismiss();
      });
  }

}

Answer 1

このやり方がいいのかわかりませんが、下記の方法で思うような動きになりました。

title :string;

this.http.get <{
id: number;
title: string;
date: string;
} >('https://APIのurl)
.subscribe(data => {
this.post = data;
this.post.title = this.post.title['rendered'];　// 追加
loading.dismiss();
});