В официальном гайде angular2 для сущности Hero рекомендуется использовать пользовательский тип для данных:
export class Hero {
id: number;
name: string;
}
Я написал подобный простейший проект, но без использования такого типа. Помогите пожалуйста понять:
В общих чертах, в моём проекте происходит следующее. Есть набор данных в json-файле. Сервис их считывает, а компонент выводит в виде расписания при помощи материал вкладок(MatTabs)
Вот фрагмент json:
},
"dd0b8a4a-9675-4d16-94cc-0b23bd3f3256": {
"date": "2",
"start": "09:30 ",
"end": " 10:10",
"title": "Rosulip, маркетинговая стратегия",
"place": "Зал Премьер 3",
"order": "220"
},
"4820f069-d56f-41d9-902a-078d4b6c8855": {
"start": "10:10 ",
"end": " 10:30",
"title": "Rosulip, SMART-визит",
"place": "Зал Премьер 3",
"order": "230",
"date": "2"
},
Сервис:
getAgenda(): Observable<any> {
let result = this.http.get('../assets/json/agenda.json');
return result;
}
Компонент:
export class AppComponent implements OnInit {
private agendaObj: any[] = [];
private agenda: any[] = [];
private dates: string[] = [];
constructor(private agendaService: AgendaService) { };
ngOnInit() {
this.getAgenda();
}
private getAgenda(): void {
this.agendaService
.getAgenda()
.subscribe(data => {
let response = JSON.parse(data._body);
//console.log(response);
this.dates = response['headers'].date.options;
console.log(this.dates);
this.agendaObj = response.values;
//console.log(this.agendaObj);
let this_ = this;
Object.keys(this.agendaObj).map(function(val, key) {
this_.agenda.push({
date: +this_.agendaObj[val].date,
start: this_.agendaObj[val].start,
end: this_.agendaObj[val].end,
title: this_.agendaObj[val].title,
place: this_.agendaObj[val].place,
order: +this_.agendaObj[val].order
});
});
console.log(this.agenda)
},
err => {
console.log('err')
});
};
}
Как видите, я обхожусь без использования пользовательского типа, описанного в гайде. При это всё работает без проблем. Но хотелось бы разобраться в тех двух вопросах, которые я озвучил выше
как его использовать
Так же, как обычно используются классы в языках программирования:
Можно создать экземпляр класса
let hero = new Hero();
Можно изменять свойства экзмепляра
hero.id = 7;
hero.name += '_great';
Можно добавить в класс методы и вызывать их:
export class Hero {
id: number;
name: string;
isHeroGreat(): boolean {
return this.name.includes('great');
}
}
let hero = new Hero();
hero.name = 'great_hero';
// где-нибудь в другом месте
if (hero.isGreat()) {
...
}
зачем нужно это делать, в чём заключается хотя бы небольшой плюс использования такого подхода
Основное преимущество заключается в статической проверке типов во время компиляции (код для angular'а пишется на языке TypeScript, потом этот код компилируется в JavaScript). То есть во время компиляции, если вы используете типы (то есть ваши объекты создаются с помощью конструкторов, а не через let hero = {}
) и вы указываете типы полей и возвращаемых значений функций (не any
) будут произведены следующие проверки:
Hero
значение переменной типа Book
hero.namr
вместо hero.name
, то компилятор это заметитТакже имеются плюсы в виде автодополнения в IDE.
Виртуальный выделенный сервер (VDS) становится отличным выбором
В браузере firefox, все работает хорошо при загрузке страницы все скролится к нужному элементу, но в webkit не работает, только если вызывать через...