角度5,离子3-【ts】类型“void”不可分配给类型“Observable<Post[]>”

本教程要求我映射到JSON,我读到Angular 5不需要映射到JSON。无法获取此工作。

GitHub <-项目文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import { Post } from '../../models/posts.inteface';
import { DataProvider } from '../../providers/data/data';

@IonicPage()
@Component({
  selector: 'page-posts',
  templateUrl: 'posts.html',
})
export class PostsPage {

  posts: Observable<Array<Post>>;

  constructor(private data: DataProvider,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  getPosts() {
    this.posts =  this.data.getPosts(); // Error 
  }
}

教程要求我这样写。

这是提供程序文件

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
/*
  Generated class for the DataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class DataProvider {

  rootUrl : string = 'https://jsonplaceholder.typicode.com'

  posts:string ='posts';

  constructor(public http: HttpClient) {
    console.log('Hello DataProvider Provider');
  }

  getPosts(){
    this.http.get(`${this.rootUrl}/${this.posts}`).map(res=>res).take(1);
  }
}

更新如@Prasheel所说,仍然错误