Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Начинаем работать с Angular 2 и TypeScript

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Мир фронт-енд разработки перевернулся с ног на голову, когда вышел AngularJS, объединив ряд новых или недавних обычаев разработки веб-приложений в мощную и удобную в использовании инфраструктуру (фреймворк). В версии 2, команда Angular переписала все с нуля с совершенно новой системой. Многие идеи Angular остаются теми же, но API и опыт разработчиков очень разные.

Посмотрите этот видео урок из моего курса, Начинаем работать с Angular 2, где мы рассмотрим как TypeScript работает c Angular 2. А также я показываю некоторые основной синтаксис TypeScript.

Начинаем работать с Angular 2 и TypeScript

Насколько TypeScript соответствует Angular 2

Angular 2 построен на TypeScript, который использует синтаксис ES6 и компилируется в обычный JavaScript. Стандарт ES5 JavaScript также подходит для TypeScript, поэтому вы всё ещё можете использовать ваш существующий код.

TypeScript отличается системой типизации (система типов). Хотя это не обязательно, я рекомендую вам использовать систему типизации в ваших проектах. Система типов полезна в больших проектах, для определения ожидаемого типа значения в вашем коде.

Это распространяется на массивы и объекты и позволяет редактору, такому как Visual Studio Code, распознавать ожидаемое значение. Это полезно в большом проекте или когда другие разработчики будут работать с вашим кодом. Вместо того, чтобы задаваться вопросом, какие данные вы должны использовать в общей переменной, вы будете знать, какой тип значения использовать.

TypeScript в действии

Прежде чем мы рассмотрим небольшой кусок синтаксиса TypeScript, мы обсудим файлы tsconfig.json и typings.json, на которых мы основываем наши проекты.

Файл tsconfig.json

tsconfigjson file code

Сначала будет скомпилирован, файл tsconfig.json, которым управляется TypeScript. Ключ target в параметрах компилятора указывает компилятору на создание ES5 JavaScript.

Module определяет стиль загрузчика модулей, который мы используем; другие параметры — общие JS, AMD и UMD. ModuleResolution определяет, как модули будут расставлены, а sourceMap генерирует соответствующий файл карты, который отображает сгенерированный JavaScript в его исходный TypeScript. EmitDecoratorMetadata и experimentalDecorators позволяют нам использовать декораторы в нашем приложении. Мы поговорим о декораторах чуть позже. RemoveComments определяет, будут ли удалены какие-либо комментарии, добавленные при компиляции, и, наконец — noImplicitAny. Это параметр определяет, как будет вести себя компилятор, если он не сможет определить тип. Так как TypeScript может быть типизирован, если мы не укажем тип, он должен определить тип, основываясь на том, какую переменную мы используем.

Если noImplicitAny установлено в false, компилятор будет использовать any для типа, который он не может определить. Если мы установим для этого значение true, TypeScript сообщит об ошибке, если он не сможет определить тип. Затем у нас есть блок exclude, которым исключаем любые файлы, которые мы хотим, чтобы компилятор проигнорировал.

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

Файл typings.json

Если мы перейдем к typings.json, мы увидим es6-shim. Это отражает типизацию, которая была добавлена в наш проект.

typingsjson file code

Компилятор TypeScript не понимает методы, которые могут быть подключены с внешними библиотеками. Если такое произойдет, вы получите сообщение об ошибке компилятора. Чтобы исправить это, мы можем получить типизацию для используемой библиотеки, чтобы TypeScript понимал методы в работе компилятора.

В этом случае, признак внешней среды и связанные зависимости указывают на то, что типизация файла поступает из DefinitelyTyped. DefinitelyTyped является огромным хранилищем файлов типизации для большинства популярных библиотек. В нашем файле typings.json, мы берем типизацию файла es6-shim. Число в конце показывает ID файла типизации. Типизация была установлена после установки и затем файл типизации был скопирован в нашу папку typings.

Типизация значений

Теперь, когда мы поняли, что мы установили касательно компилятора TypeScript, давайте посмотрим на сам язык. Первое, что мы рассмотрим, это типизация значений.

tempts file code

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

Если мы попытаемся сохранить число в переменной myName, мы получим ошибку. Это будет справедливо, если мы попытаемся сохранить неправильный тип в любой переменной. Также, мы можем использовать any, для указания на то, что для переменной может быть задан любой тип:

Мы также можем использовать void в качестве типа, как правило, в качестве типа ответа функции, которая не возвращает значение.

И наконец, мы можем использовать массив как тип. Мы используем тип элементов внутри массива, квадратные скобки дают нам понять, что это массив.

Также, мы можем записать тип массива вот так:

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

Тут мы создали простой интерфейс, но чтобы лучше его понять, давайте его применим.

Sample interface code

В функции, мы определили интерфейс как форму аргумента, который мы передаем в эту функцию. Затем мы создаем объект. Последняя строка выведет наш заголовок, если мы скомпилируем и выполним этот код.

В этом интерфейсе требуется использовать только свойство title. Мы добавили другое свойство, но TypeScript это не интересует тех пор, пока в объекте есть свойство title. Если бы его не было, мы бы получили ошибку. Также заметьте, что порядок свойств не имеет значения, пока присутствует требуемое значение.

Классы

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

Вместо изучения синтаксиса фреймворка, синтаксис Angular 2 основан на TypeScript. Таким образом, вы не ограничиваете себя изучением Angular 2, так как синтаксис будет полезен при разработке за пределами Angular 2. По своей сути, класс создается следующим образом:

Любая логика, а также функция-конструктор могут быть включены в этот класс.

Мы расширяем это в Angular 2 используя декораторы, такие как @Component({}). Этот декоратор добавляет метаданные, которые сообщают приложению, что этот класс является компонентом Angular. Мы строим наши приложения для добавления метаданных в наши компоненты, сервисы, директивы и т.д. Все, что мы создаем для Angular 2, будет основано на классе. Мы изучим это в дальнейшем, при создании наших приложений.

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

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

Смотрите полный курс

В полном курсе Начинаем работать с Angular 2, вы узнаете, как создать простое веб-приложение с нуля, начиная со скаффолдинга, заканчивая конфигурацией инструментов. Вы узнаете, как использовать статически-типизированные вариации TypeScript в JavaScript для создания компонентов Angular 2, сервисов и директив. По пути вы увидите, как реализовать основы современного одностраничного приложения: включая маршрутизацию, внешний доступ к API, пользовательский ввод и проверку данных.

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.