1

У меня есть приложение на angular, в котором есть страница новостей. Список новостей(массив) я получаю с api сервера. Я могу использовать полученные данные напрямую, но может лучше создать класс NewsItem, который полностью повторяет структуру каждой новости из массива и получаемые данные преобразовывать в массив объектов NewsItem[]?

Пример кода без преобразовывания:

В news.service.ts

getNews(leftBound:number, rightBound:number) {
    return this.http.get(AppSettings.API_ENDPOINT + `/api/news/${leftBound}/${rightBound}`)
}

В news.component.ts

ngOnInit(){
    this.newsService.getNews(this.leftBound, this.rightBound).subscribe( 
        (response) => {
            this.news = response.json();
        })
}

Пример кода c преобразовыванием:

В news.service.ts

getNews(leftBound:number, rightBound:number):Observable<NewsItem[]> {
    return this.http.get(AppSettings.API_ENDPOINT + `/api/news/${leftBound}/${rightBound}`)
                .map((resp:Response) => {
                    let newsList = resp.json();
                    let news: NewsItem[] = [];
                    for(let i in newsList){
                      let item = newsList[i];
                      news.push(new NewsItem(item.title, item.date, item.text));
                    }
                    return news;
                })
}

В news.component.ts

ngOnInit(){
    this.newsService.getNews(this.leftBound, this.rightBound).subscribe( (news) => {
        this.news = news;
    })
}

Класс NewsItem

@Injectable()
export class NewsItem{
  date: string;
  title: string;
  text: string;
  constructor(title: string, date: string, text: string){
    this.title = title;
    this.date = date;
    this.text = text;
  }
}

Далее, в обоих случаях одинаково, я вывожу новости в шаблоне компонента.

Как лучше сделать в данной ситуации?
И в целом, всегда ли нужно создавать свои классы или же бывают случаи, когда лучше не усложнять себе задачу и просто воспользоваться данными, полученными с сервера?

4
  • приведи пример кода про преобразовывание и использование сразу
    – Grundy
    20 апр 2017 в 14:35
  • @Grundy пример добавил. Мне скорее не понятно, нужно ли создавать свои классы, если можно сразу работать с данными, которые я получил с сервера? При этом наличия методов не предполагается. 20 апр 2017 в 16:16
  • добавь определение класса NewsItem
    – Grundy
    20 апр 2017 в 18:20
  • @Grundy добавил 20 апр 2017 в 22:08

1 ответ 1

2

Typescript добавляет возможность использовать типы в определениях переменных и функций, а также возможность проверить эти типы в момент компиляции. Это может помочь избежать некоторых ошибок связанных с передачей неожиданных объектов.

Если точно известно, что должна возвращать функция, то лучше указать тип возвращаемого значения.

В данном случае, всегда ожидается Observable<NewsItem[]>, поэтому вполне нормально указать именно его.

С другой стороны, так как класс NewsItem представляет из себя лишь данные, по крайней мере в данном примере, то нет нужды использовать приведение. Можно воспользоваться тем фактом, что resp.json() возвращает объект типа any, а такие объекты можно присвоить любому типу.

В итоге код функции может быть следующим:

getNews(leftBound:number, rightBound:number) {
    return this.http.get(AppSettings.API_ENDPOINT + `/api/news/${leftBound}/${rightBound}`)
               .map((resp:Response) => {
                   let newsList = resp.json();
                   return newsList;
               }
}

И в самой подписке останется простое присвоение, так как тело json уже было взято

ngOnInit(){
    this.newsService.getNews(this.leftBound, this.rightBound).subscribe( (news) => {
        this.news = news;
    })
}

В итоге: нет лишнего цикла, есть типизированный результат.

Мне скорее не понятно, нужно ли создавать свои классы, если можно сразу работать с данными, которые я получил с сервера?

свои классы позволят использовать мощь проверки типов, что в свою очередь поможет избежать некоторых видов ошибок, а так же добавляет подсказки по используемым полям.

С другой стороны, есть тип any, в который можно записать любое значение. Но при его использовании теряется подсказка доступных полей, а так же добавляется шанс передать в функцию значение определенного класса.

Итого: если данные никак не используются в коде, а только выводятся во view, большой разницы между типизированным значением и any не будет. Если же с данными планируются еще какие-то операции - то лучше указывать тип, и, соответственно, создавать свои классы (либо interface)

2
  • Большое спасибо. В дополнение хочу спросить, при работе на javascript, где нет строгой типизации, создание класса так-же не имеет смысла, если данные только выводятся во view? 21 апр 2017 в 8:39
  • @КолькаТесемин, если ты этими данными нигде не пользуешься, а просто сразу выводишь во view, то да - класс не нужен. Он не даст никаких преимуществ. Максимум его можно использовать как задел на будущее, когда возможно ты захочешь как-то обработать данные перед выводом
    – Grundy
    21 апр 2017 в 8:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.