Programming TypeScript

import { Component , OnInit } dan '@burchak/yadro'
@Component ({
selektor : 'oddiy xabar' ,
styleUrls : [ './simple-message.component.css' ], templateUrl : './simple-message.component.html'
})
eksport sinf SimpleMessageComponent asboblar OnInit {
xabar : string ngOnInit() {
bu . xabar = "Hali hech qanday xabar yo'q"
}
}
Ko'pincha, bu juda standart TypeScript klassi bo'lib, Angular TypeScript-dan qanday foydalanishini ko'rsatadigan bir nechta farqlarga ega. Ya'ni:

• 
  Angular-ning hayot aylanish ilgaklari TypeScript interfeyslari sifatida mavjud - faqat qaysilarini amalga oshirishingizni e'lon qiling ( ngOnChanges , ngOnInit va boshqalar). Keyin TypeScript siz xohlagan hayot aylanishi ilgaklariga mos keladigan usullarni qo'llashingizga majbur qiladi. Ushbu misolda biz OnInit interfeysini amalga oshirdik, bu esa ngOnInit usulini qo'llashimizni talab qiladi .
  
• 
  Angular komponentlar, xizmatlar va modullar bilan bog'liq metama'lumotlarni e'lon qilish uchun TypeScript dekoratorlaridan ( 104-betdagi “Dekoratorlar” ga qarang) ko'p foydalanadi . Ushbu misolda biz odamlar komponentimizni qanday iste'mol qilishini e'lon qilish uchun selektordan foydalandik va HTML shablonini va CSS uslublar jadvalini komponentimizga ulash uchun templateUrls va styleUrl dan foydalandik.
  

T SC bayrog'i: fullTemplateTypeCheck

tsconfig.json faylida fullTemplateTypeCheck funksiyasini yoqing :
{
"angularCompilerOptions" : {
"fullTemplateTypeCheck" : rost
}
}
AngularCompilerOptions TSC uchun variantlarni ko'rsatmasligini unutmang . Aksincha, u Angular's AoT kompilyatoriga xos kompilyator bayroqlarini belgilaydi.

Xizmatlar

Angular o'rnatilgan bog'liqlik injektori (DI) bilan birga keladi, bu ramka uchun xizmatlarni yaratish va ularga bog'liq bo'lgan komponentlar va xizmatlarga argument sifatida o'tkazish haqida g'amxo'rlik qilishning bir usuli hisoblanadi. Bu xizmatlar va komponentlarni yaratish va sinovdan o'tkazishni osonlashtirishi mumkin.
Keling, SimpleMessageComponent-ni serverdan xabarlarni olish uchun mas'ul bo'lgan MessageService bog'liqligini kiritish uchun yangilaymiz: