Angular построен на TypeScript, расширенном наборе JavaScript, который обеспечивает безопасность типов, позволяя разработчикам выявлять потенциальные ошибки во время разработки, а не во время выполнения. Для разработчиков, знакомых с TypeScript, это будет знакомая ситуация, но если вы новичок в TypeScript, давайте рассмотрим некоторые из его ключевых функций, в том числе статическую типизацию, интерфейсы, свойства класса и уровни доступа (например, общедоступный и частный). Эти функции будут иметь решающее значение на протяжении всего вашего пути в разработке Angular.

1. Статическая типизация

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

В простом JavaScript вы можете объявить переменные следующим образом:

let name = "Whiskers";
let age = 5;

В TypeScript вы можете обеспечить соблюдение типов данных, добавив их в объявление переменной:

let name: string = "Whiskers";
let age: number = 5;

При такой настройке TypeScript гарантирует, что имя всегда будет строкой, а возраст всегда будет числом. Если вы попытаетесь присвоить недопустимое значение, например строку age, компилятор TypeScript выдаст ошибку, и код не скомпилируется.

Это помогает предотвратить потенциальные ошибки в вашем коде, обнаруживая ошибки во время разработки, что дает вам больше уверенности в правильности вашего кода.

2. Интерфейсы

В TypeScript интерфейсы позволяют определять форму объекта. Это означает, что вы можете указать необходимые свойства и их типы, а TypeScript обеспечит соответствие формы любому объекту, назначенному этому интерфейсу.

Например, давайте определим интерфейс для объекта Cat:

interface Cat {
    name: string;
    age: number;
    breed?: string; // optional property
}

Теперь, когда вы создаете объект кошки, он должен соответствовать этому интерфейсу:

const fluffy: Cat = {
    name: "Fluffy",
    age: 3
};

В этом случае поля имени и возраста являются обязательными, а порода не является обязательной из-за знака ?. Если вы попытаетесь назначить объект Cat, который не соответствует интерфейсу, TypeScript отметит проблему:

const wrongCat: Cat = {
    name: "Whiskers",
    // missing 'age' property
};

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

3. Свойства класса

Классы TypeScript похожи на классы JavaScript, но имеют дополнительную безопасность типов и функции. Например, вы можете явно объявить типы для свойств класса:

class Cat {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

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

class Cat {
    name: string;
    breed?: string;
}

TypeScript обеспечит соответствие этих свойств объявленным вами типам, что сделает ваш код более предсказуемым и простым в отладке.

4. Публичная и частная доступность

Другая важная особенность TypeScript — это возможность контролировать доступность членов класса (свойств и методов) с помощью модификаторов открытого и частного доступа. По умолчанию все члены класса являются общедоступными как в JavaScript, так и в TypeScript, то есть к ним можно получить доступ откуда угодно. Однако вы можете явно пометить членов класса как частные, чтобы ограничить их доступ внутри класса.

Например:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    speak() {
        return `Meow! I am ${this.name}`;
    }
}

В этом примере свойство name является общедоступным, поэтому к нему можно получить доступ вне класса, но свойство age является частным, поэтому доступ к нему возможен только внутри самого класса.

const whiskers = new Cat("Whiskers", 5);
console.log(whiskers.name); // Works fine
console.log(whiskers.age); // Error: 'age' is private

Использование Private обеспечивает инкапсуляцию, предотвращая случайные изменения или доступ к конфиденциальным данным класса извне класса.

5. Сокращение конструктора

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

Вот простой пример:

class Cat {
    constructor(public name: string, private age: number) {}
}

Этот код функционально эквивалентен следующему:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Сокращение конструктора упрощает код и уменьшает повторение. TypeScript автоматически генерирует необходимые объявления и назначения свойств, избавляя вас от необходимости писать дополнительный код.

Заключение

В этой статье мы рассмотрели некоторые ключевые функции TypeScript, с которыми вы часто столкнетесь при разработке на Angular:

• Статическая типизация гарантирует, что ваши переменные, свойства и параметры имеют согласованные типы.
• Интерфейсы позволяют определять форму объектов, добавляя дополнительную структуру вашему коду.
• Свойства класса предоставляют вашим классам явные, типобезопасные объявления полей.
• Публичный и частный доступ обеспечивает контролируемый доступ к членам класса, улучшая инкапсуляцию кода.
• Сокращение конструктора упрощает процесс инициализации свойств внутри классов.

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

Далее давайте углубимся в подготовку среды разработки для Angular и настроим инструменты, необходимые для начала работы!