Как создать тип и использовать?

360
22 октября 2017, 23:44

В официальном гайде angular2 для сущности Hero рекомендуется использовать пользовательский тип для данных:

export class Hero {
  id: number;
  name: string;
}

Я написал подобный простейший проект, но без использования такого типа. Помогите пожалуйста понять:

  1. как его использовать в моём проекте
  2. зачем нужно это делать, в чём заключается хотя бы небольшой плюс использования такого подхода

В общих чертах, в моём проекте происходит следующее. Есть набор данных в 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')         
                  });    
  };   
}

Как видите, я обхожусь без использования пользовательского типа, описанного в гайде. При это всё работает без проблем. Но хотелось бы разобраться в тех двух вопросах, которые я озвучил выше

Answer 1

как его использовать

Так же, как обычно используются классы в языках программирования:

  • Можно создать экземпляр класса

    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.

READ ALSO
JS/jQuery - Массив из Dom-элементов

JS/jQuery - Массив из Dom-элементов

Есть такой код в HTML:

361
Scroll к элементу при загрузке страницы

Scroll к элементу при загрузке страницы

В браузере firefox, все работает хорошо при загрузке страницы все скролится к нужному элементу, но в webkit не работает, только если вызывать через...

354
Адаптивное меню на js

Адаптивное меню на js

Нигде не нашёл как сделать адаптивное меню на чистом js(Cкриншоты ниже)

667