7.1 Типизация компонентов
Типизация и использование служб (services) в Angular помогают организовать код и обеспечить его надежность. В этой лекции мы рассмотрим, как создавать компоненты Angular с использованием TypeScript, уделяя особое внимание типизации и службам.
TypeScript добавляет статическую типизацию к JavaScript, что помогает обнаруживать ошибки на этапе компиляции и улучшает автодополнение в редакторах кода. В Angular типизация используется для определения типов пропсов, состояния компонентов и служб.
Основы создания компонента
Для создания нового компонента в Angular можно использовать Angular CLI.
Создание нового компонента:
ng generate component my-component
Это создаст следующие файлы:
src/app/my-component/
├── my-component.component.ts
├── my-component.component.html
├── my-component.component.css
└── my-component.component.spec.ts
7.2 Типизация пропсов
В Angular компоненты могут принимать входные данные (props), которые типизируются с помощью декоратора @Input.
Пример компонента с типизированными пропсами:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-greeting',
templateUrl: './greeting.component.html',
styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
@Input() name: string = '';
@Input() age?: number; // Необязательный пропс
}
В этом примере компонент GreetingComponent принимает два пропса: name и age. Пропс age необязательный.
Шаблон компонента (greeting.component.html):
<div>
<h1>Hello, {{ name }}!</h1>
<p *ngIf="age">You are {{ age }} years old.</p>
</div>
7.3 Типизация состояния
Состояние в компонентах Angular определяется как свойства класса. Эти свойства можно типизировать для обеспечения корректности данных.
Пример компонента с типизированным состоянием:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
count: number;
constructor() {
this.count = 0;
}
ngOnInit(): void {}
increment(): void {
this.count += 1;
}
decrement(): void {
this.count -= 1;
}
}
В этом примере компонент CounterComponent имеет состояние count, которое типизировано как number.
Шаблон компонента (counter.component.html):
<div>
<h1>Count: {{ count }}</h1>
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
</div>
7.4 Службы (Services) в Angular
Службы в Angular используются для разделения бизнес-логики и данных от компонентов. Это улучшает повторное использование кода и тестируемость. Службы создаются с помощью декоратора @Injectable.
Создание новой службы
ng generate service my-service
Это создаст файл my-service.service.ts.
Определение службы
Пример службы для управления данными:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string[] = [];
constructor() {}
addData(item: string): void {
this.data.push(item);
}
getData(): string[] {
return this.data;
}
clearData(): void {
this.data = [];
}
}
В этом примере служба DataService предоставляет методы для управления массивом строковых данных.
Внедрение службы в компонент
Для использования службы в компоненте ее нужно внедрить через конструктор.
Пример компонента с внедренной службой:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-data-list',
templateUrl: './data-list.component.html',
styleUrls: ['./data-list.component.css']
})
export class DataListComponent implements OnInit {
items: string[] = [];
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.items = this.dataService.getData();
}
addItem(item: string): void {
this.dataService.addData(item);
this.items = this.dataService.getData();
}
clearItems(): void {
this.dataService.clearData();
this.items = [];
}
}
В этом примере компонент DataListComponent использует методы службы DataService для управления данными.
Шаблон компонента (data-list.component.html):
<div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
<button (click)="addItem('New Item')">Add Item</button>
<button (click)="clearItems()">Clear Items</button>
</div>
7.5 Тестирование компонентов и служб
Angular CLI автоматически создает тестовые файлы при генерации компонентов и служб. Использование тестов помогает убедиться в корректности работы кода.
Пример теста для компонента
data-list.component.spec.ts:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataListComponent } from './data-list.component';
import { DataService } from '../data.service';
// Опис тестового набору для DataListComponent
describe('DataListComponent', () => {
let component: DataListComponent; // Компонент, который тестируется
let fixture: ComponentFixture<DataListComponent> // Компонент для управления тестом
let dataService: DataService; // Сервис, который будет протестировано
// Перед выполнением тестов
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [DataListComponent], // Декларация компонента
providers: [DataService] // Внедрение сервиса
}).compileComponents(); // Компиляция компонентов
});
// Перед каждым тестом
beforeEach(() => {
fixture = TestBed.createComponent(DataListComponent); // Создание экземпляра компонента
component = fixture.componentInstance; // Получение экземпляра компонента
dataService = TestBed.inject(DataService); // Внедрение сервиса
fixture.detectChanges(); // Обновление состояния компонента
});
// Тест на создание компонента
it('should create', () => {
expect(component).toBeTruthy(); // Проверка, что компонент создан
});
// Тест на добавление элемента в список
it('should add item to the list', () => {
component.addItem('Test Item'); // Добавление тестового элемента
expect(component.items).toContain('Test Item'); // Проверка, что элемент добавлен в массив
});
// Тест на очистку элементов из списка
it('should clear items from the list', () => {
component.addItem('Test Item'); // Добавление элемента
component.clearItems(); // Очистка списка
expect(component.items.length).toBe(0); // Проверка, что список пуст
В этом примере тест проверяет корректность работы методов addItem и clearItems компонента DataListComponent.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ