#2 – Основы TypeScript для Angular

Что такое TypeScript?

Сперва узнаем, что это вообще такое. TypeScript — это надстройка над JavaScript, разработанная компанией Microsoft. Его основная особенность — строгая типизация. То есть вы заранее описываете, какие типы данных используются в переменных, функциях и объектах. Это помогает избежать ошибок ещё на этапе написания кода, до его запуска.

Angular полностью написан на TypeScript, поэтому все проекты, создаваемые через Angular CLI, по умолчанию используют именно его.

Типы данных в TypeScript

Начнём с базовых типов, которые очень похожи на обычный JavaScript. Если вы не указываете тип явно, TypeScript попытается определить его самостоятельно, но в Angular принято всегда указывать типы явно — это делает код более читаемым и безопасным.

В примере показаны стандартные типы: строка, число, булево значение и массив строк.

let username: string = 'John';
let age: number = 30;
let isAdmin: boolean = true;
let tags: string[] = ['angular', 'typescript'];

Интерфейсы

Интерфейсы позволяют описывать структуру объектов. Это очень важно в Angular, особенно когда вы работаете с компонентами, формами или данными из API.

Ниже приведён пример интерфейса для заметки. Здесь указаны несколько полей и соответствующие им типы данных.

export interface Note {
	id: number;
	title: string;
	content: string;
	createdAt: Date;
}

Теперь, после его создания, мы можем использовать Note как тип для переменных, массивов и функций.

const notes: Note[] = [
	{
		id: 1,
		title: 'Первая заметка',
		content: 'Содержимое заметки',
		createdAt: new Date(),
	},
];

То есть теперь любой элемент в данном массиве должен соответствовать структуре, указанной в интерфейсе.

Классы

Классы в TypeScript похожи на классы JavaScript, но с более строгой типизацией. Вы можете создавать полноценные модели и реализовывать логику. В данном примере показан класс для описания фильма. Здесь есть конструктор, который позволяет установить определённые значения с нужными типами данных, а также метод для получения описания.

export class Movie {
	constructor(
		public title: string,
		public genre: string,
		public year: number
	) {}
	
	getDescription(): string {
		return `${this.title} (${this.year}) — жанр: ${this.genre}`;
	}
}

Такой класс легко можно использовать для создания объектов в будущем. Преимущество в том, что все объекты будут иметь строгую типизацию, и вы сможете передавать только значения, соответствующие указанным типам данных.

const movie = new Movie('Интерстеллар', 'Фантастика', 2014);
console.log(movie.getDescription());

Декораторы

А вот декораторы — это одна из ключевых фич Angular. Они начинаются с символа @ и используются для добавления метаинформации к классам и их элементам. Например, компонент Angular всегда начинается с декоратора @Component().

Декораторы помогают Angular понимать, как интерпретировать данный класс — как компонент, сервис, модуль и т.д. Здесь же обычно указывается, какой HTML-шаблон будет использован и какие к нему подключаются CSS-стили.

@Component({
	selector: 'app-header',
	templateUrl: './header.component.html',
	styleUrls: ['./header.component.css'],
})
export class HeaderComponent {
	title = 'Добро пожаловать!';
}

Импорты и модули

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

Такой подход используется повсеместно. Мы также будем экспортировать что-то из файлов и импортировать это в других. Это помогает поддерживать чистую структуру проекта и легко управлять зависимостями.