Как скомпилировать typescript файл helloworld ts
В конце 2012 года Microsoft представила TypeScript, типизированный суперсет для JavaScript, который компилируется в обычный JavaScript. TypeScript фокусируется на предоставлении полезных инструментов для крупномасштабных приложений путем реализации функций, таких как классы, аннотации типов, наследование, модули и многое другое! В этом уроке мы начнем с TypeScript, используя простые примеры кода с укусом, скомпилируем их в JavaScript и просмотрим мгновенные результаты в браузере.
Установка инструментов
Возможности TypeScript применяются только во время компиляции.
Вы настроите свою машину в соответствии с вашей конкретной платформой и потребностями. Пользователи Windows и Visual Studio могут просто загрузить плагин Visual Studio. Если вы работаете в Windows и не имеете Visual Studio, попробуйте Visual Studio Express для Интернета. Опыт TypeScript в Visual Studio в настоящее время превосходит другие редакторы.
Если вы работаете на другой платформе (или не хотите использовать Visual Studio), все, что вам нужно, это текстовый редактор, браузер и пакет npm для TypeScript для использования TypeScript. Следуйте инструкциям по установке:
- Установка диспетчера пакетов node (npm)
- Глобально установите TypeScript пакет npm:
- Любой современный браузер: для этого учебника мы используем Chrome.
- Любой текстовый редактор: для этого учебника используется Sublime Text
- Модуль подсветки синтаксиса для текстовых редакторов
Готово; мы готовы сделать простое приложение «Hello World» в TypeScript!
Hello World в TypeScript
TypeScript является надмножеством Ecmascript 5 (ES5) и включает функции, предлагаемые для ES6. Из-за этого любая программа JavaScript уже является программой TypeScript. Компилятор TypeScript выполняет локальные преобразования файлов в программах TypeScript. Следовательно, окончательный вывод JavaScript точно соответствует вводу TypeScript.
Сначала мы создадим базовый файл index.html и ссылку на внешний файл сценария:
Это простое приложение «Hello World»; поэтому давайте создадим файл с именем hello.ts . Расширение *.ts обозначает файл TypeScript. Добавьте следующий код в hello.ts :
Затем откройте интерфейс командной строки, перейдите к папке, содержащей hello.ts , и запустите компилятор TypeScript с помощью следующей команды:
Команда tsc является компилятором TypeScript и сразу генерирует новый файл hello.js . В нашем приложении TypeScript не используется синтаксис, специфичный для TypeScript, поэтому мы видим тот же самый код JavaScript в hello.js , который мы написали на hello.ts .
Круто! Теперь мы можем изучить возможности TypeScript и посмотреть, как это может помочь нам поддерживать и создавать широкомасштабные приложения JavaScript.
Аннотации type
Аннотации типа являются дополнительной функцией, которая позволяет нам проверять и выражать наше намерение в программах, которые мы пишем. Давайте создадим простую функцию area() в новом файле TypeScript, называемом type.ts
Затем измените источник скрипта в index.html на type.js и запустите компилятор TypeScript с помощью t sc type.ts . Обновите страницу в браузере, и вы увидите следующее:
Как показано в предыдущем коде, аннотации типа выражаются как часть параметров функции; они указывают, какие типы значений вы можете передать функции. Например, параметр shape обозначается как строковое значение, а width и height - это числовые значения.
Аннотации типов и другие функции TypeScript применяются только во время компиляции. Если вы передадите какие-либо другие типы значений этим параметрам, компилятор даст вам ошибку времени компиляции. Такое поведение чрезвычайно полезно при создании крупномасштабных приложений. Например, давайте намеренно передать строковое значение для параметра width :
Мы знаем, что это приводит к нежелательному результату, и компиляция файла предупреждает нас о проблеме со следующей ошибкой:
Обратите внимание, что, несмотря на эту ошибку, компилятор сгенерировал файл type.js . Ошибка не останавливает компилятор TypeScript от генерации соответствующего JavaScript, но компилятор предупреждает нас о потенциальных проблемах. Мы предполагаем, что width будет числом; передача чего-либо другого приводит к нежелательному поведению в нашем коде. Другие аннотации типа включают bool или даже any .
Интерфейсы
Давайте расширим наш пример, включив интерфейс, который далее описывает форму как объект с дополнительным свойством color . Создайте новый файл с именем interface.ts и измените источник скрипта в index.html , чтобы включить interface.js . Введите следующий код в interface.ts :
Интерфейсы - это имена, присвоенные типам объектов. Мы можем не только объявить интерфейс, но и использовать его как аннотацию типа.
Компиляция interface.js не приводит к ошибкам. Чтобы вызвать ошибку, добавим еще одну строку кода в interface.js с формой, которая не имеет свойства имени и посмотрим результат в консоли браузера. Добавьте эту строку в interface.js :
Теперь давайте посмотрим на ошибку. Это:
Мы видим эту ошибку, поскольку объект, переданный в area() , не соответствует интерфейсу Shape ; для этого требуется свойство name.
Стрелочные функции
Понимание сферы действия ключевого слова this является сложной задачей, и TypeScript упрощает его, поддерживая выражения стрелочных функций, новую возможность, обсуждаемую для ECMAScript 6. Стрелочные функции сохраняют значение this , что значительно упрощает запись и использование функций обратного вызова. Рассмотрим следующий код:
this.name в строке 7 будет явно пустым, как показано в консоли браузера:
Взгляните на созданный файл JavaScript. Вы увидите, что компилятор ввел новую переменную var _this = this; , и использовал ее в функции обратного вызова setTimeout() для ссылки на свойство name .
Классы с общедоступными и частными модификаторами доступа
TypeScript поддерживает классы, и их реализация тесно соответствует предложению ECMAScript 6. Давайте создадим еще один файл с именем class.ts , и рассмотрим синтаксис класса:
Вышеуказанный класс Shape имеет два свойства, area и color , один конструктор (точно названный constructor() ), а также метод shoutout() . Скоуп аргументов конструктора ( name , width и height ) являются локальными для конструктора. Вот почему вы увидите ошибки в браузере, а также компилятора:
Любая программа JavaScript уже является программой TypeScript.
Затем давайте рассмотрим public и private модификаторы доступа. Доступ к публичным членам можно получить повсюду, тогда как частные члены доступны только в рамках класса. Разумеется, в JavaScript нет возможности для обеспечения конфиденциальности, поэтому доступность для частного доступа обеспечивается только во время компиляции и служит предупреждением первоначальному намерению разработчика сделать его конфиденциальным.
В качестве иллюстрации добавим модификатор public к аргументу конструктора, name и модификатор private к color . Когда мы добавляем public или private доступность к аргументу конструктора, этот аргумент автоматически становится членом класса с соответствующим модификатором доступности.
Наследование
Наконец, вы можете расширить существующий класс и создать из него производный класс с ключевым словом extends . Давайте добавим следующий код к существующему файлу class.ts и скомпилируем его:
Несколько вещей происходят с производным классом Shape3D :
- Поскольку он получен из класса Shape , он наследует свойства area и color .
- Внутри метода конструктора метод super вызывает конструктор базового класса Shape , передавая значения name , width и height . Наследование позволяет нам повторно использовать код из Shape , поэтому мы можем легко вычислить this.volume с унаследованным свойством area .
- Метод shoutout() переопределяет реализацию базового класса, а новый метод superShout() напрямую вызывает метод buout() базового класса, используя ключевое слово super .
Имея только несколько дополнительных строк кода, мы можем легко расширить базовый класс, чтобы добавить более конкретные функции и сделать наше намерение известным с помощью TypeScript.
Ресурсы TypeScript
Несмотря на чрезвычайно молодой возраст TypeScript, вы можете найти много полезных ресурсов в Интернете (включая полный курс, который подходит к Tuts + Premium!). Обязательно проверьте их:
Мы только начинаем
Попробовать TypeScript легко. Если вам нравится более статически типизированный подход для больших приложений, то функции TypeScript будут применять привычную, дисциплинированную среду. Хотя его и сравнивают с CoffeeScript или Dart, TypeScript отличается тем, что он не заменяет JavaScript; он добавляет функции JavaScript.
Цель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.
Так же, автор пишет эту статью для структурирования собственных мыслей, знаний и практического опыта, и получает хорошую мотивацию на изучение новых аспектов разработки.
Автор полностью открыт для доработки и исправления текущей статьи, и надеется на превращение итогового материала в актуальный и удобный справочник, интересный и для профессионалов, и для желающих опробовать новые для них технологии.
Статья не рассматривает подробный синтаксис TypeScript и основы работы с React, если читатель не имеет опыта использования указанных выше технологий, рекомендуется разделить их изучение.
Немного об используемых технологиях:
Написание проекта на TypeScript влечет за собой множество трудностей, особенно при первом знакомстве с языком. На взгляд автора, преимущества строгой типизации стоят этих усилий.
Помимо возможностей самого языка, компилятор TypeScript генерирует JavaScript код под все версии стандарта, и позволяет отказаться от использования Babel в проекте (автор не имеет ничего против этого замечательного инструмента, но одновременное использование TS и Babel вносит небольшую путаницу на старте).
React — зарекомендовавшая себя библиотека для создания веб-интерфейсов, с огромным сообществом и инфраструктурой.
Недавно вышла новая версия библиотеки со множеством улучшений и переработанной документацией.
Для сборки проекта мы будем использовать Webpack — лучший друг frontend разработчика. Базовые настройки этого инструмента очень просты в изучении и использовании. Серьезно.
NodeJs v6.*.*Npm v5.*.*
TypeScript v2.*.*
Webpack v3.*.*
React v16.*.*
Начнем!
Репозиторий проекта содержит код в отдельных ветках под каждый шаг.
Шаг первый — добавление TypeScript в проект.
Для просмотра итогового кода:
git checkout step-1
npm i webpack typescript awesome-typescript-loader --save-dev
awesome-typescript-loader — TypeScript загрузчик для webpack, считается быстрее основного конкурента — ts-loader.
Для исходников нашего проекта создадим папку src .
Результаты сборки будем отправлять в dist .
Базовые настройки для компилятора TypeScript — файл tsconfig.json в корневой директории проекта
Базовые настройки сборщика — файл webpack.config.js в корневой директории проекта:
Внутри src создадим файл index.ts с любым кодом, использующим синтаксис TypeScript, например:
Команда для компиляции и сборки нашего кода:
webpack — разовый билд проекта
В итоговом файле dist/app.bundle.js внутри webpack модулей вы увидите аккуратный и читаемый JavaScript код выбранной нами версии стандарта.
Созданное нами окружение легко расширить любыми библиотеками, и удобно использовать для создания прототипов (Ваша Любимая Технология + TypeScript).
Шаг второй — создание крохотного React приложения.
Для просмотра итогового кода:
git checkout step-2
npm i webpack react react-dom --save
npm i webpack @types/react @types/react-dom html-webpack-plugin clean-webpack-plugin --save-dev
html-webpack-plugin — плагин для генерации html-файла с подключенными результатами сборки.
clean-webpack-plugin — для очистки директории с результатами сборки.
@types/react и @types/react-dom — пакеты с декларацией соответствующих JS библиотек, дающие компилятору TS информацию о типах всех экспортируемых модулей.
Большая часть популярных JS библиотек имеет декларации, иногда они находятся в исходных файлах проекта, иногда — в замечательном репозитории DefinitelyTyped, который активно развивается благодаря сообществу, и в случае отсутствия или ошибок в существующей декларации, вы можете с легкостью вносить свой вклад для исправления этих проблем.
Внутри src создадим файл index.html с элементов для монтирования корневого react компонента:
Обновляем настройки webpack:
Обновим настройки компилятора TypeScript:
Перейдем к компонентам.
Необходимо изменить расширение у index.ts на index.tsx . Напишем код нашего компонента, и отобразим его на странице:
Добавим команду для компиляции и сборки нашего кода:
На данном этапе могут возникнуть вопросы к размеру сборки — автор уделит особое внимание разделению на production и development сборки, в следующих шагах. На первых этапах стоит акцент на минимально необходимых настройках и библиотеках, для полного осознания процесса.
Шаг третий — рецепты приготовления React и TypeScript
Для просмотра итогового кода:
git checkout step-3
Зависимости на этом шаге не меняются.
Рекомендуется ознакомиться с обобщениями на этом этапе — generics (дженерики)
Более подробно о стандартных React паттернах можно узнать из этой статьи.
1) Стандартный компонент, имеющий свойства и состояние
Создадим компонент simple.tsx , который будет выводит контролируемое поле ввода:
2) Компонент высшего порядка
Описание компонентов высшего порядка в официальной документации React — по ссылке
Статья, подробно расписывающая написание компонента высшего порядка на TypeScript (примеры из этой статьи частично заимствованы автором) — по ссылке
Если коротко, компонент высшего порядка (далее hoc) — это функция, которая принимает аргументом компонент (и по желанию дополнительные опции), и возвращает новый компонент, который выводит старый в методе render , передавая ему свои свойства и состояние.
Сигнатура выглядит так: (Component) => WrapComponent => Component
Так как TypeScript строго следит за тем, какие свойства мы передаем в компоненты, нам нужно определиться с интерфейсами этих свойств.
OriginProps — уникальные свойства компонента, hoc ничего о них не знает, только передает в компонент.
ExternalProps — уникальные свойства hoc.
InjectedProps — свойства, которые мы будем передавать в компонент из hoc, рассчитываются на основе ExternalProps и State.
State — интерфейс состояния hoc. Так как мы будем передавать компоненту все состояние hoc, State не может иметь свойств, которые отличаются от InjectedProps (либо мы должны передавать доступные свойства, не используя оператор расширения).
Перейдем к коду, напишем простой счетчик нажатий кнопки.
Создадим папку hoc , в ней компонент displayCount.tsx и hoc withCount.tsx
Далее, опишем использование нашего компонента высшего порядка:
Свойства и состояние WithCount(DisplayCount):
Свойства и состояние DisplayCount:
Здесь мы видим лишнее свойство increment , в случае необходимости от него можно избавиться, используя например метод omit в lodash.
3) Ленивая загрузка компонентов:
Для загрузки компонентов по требованию воспользуемся синтаксисом динамического импорта модулей.
В TypeScript этот синтаксис появился в версии 2.4.
Webpack, встречая динамический импорт, создает отдельный бандл для модулей, которые попадают под условие импорта.
Простейшее выражение для импорта:
Далее мы напишем компонент, который принимает функцию, возвращающую import, и выводит полученный компонент.
Создадим папку lazy , в ней компоненты lazyComponent.tsx и lazyLoad.tsx
LazyComponent — простой функциональный компонент, в реально приложении это может быть отдельная страница, или автономный виджет:
LazyLoad — универсальный компонент для загрузки и вывода динамического компонента.
В случае необходимости прокидывать свойства в динамический компонент, LazyLoad можно переписать на компонент высшего порядка.
Все-таки обновим настройки webpack, для возможности задавать бандлам имя:
И обновим настройки tsconfig.json — вручную укажем библиотеки, которые надо использовать TypeScript при компиляции. Нам нужна конкретно «es2015.promise», но для удобства добавим полный список по ES стандартам, и конечно DOM.
4) Render props
Описание компонентов с render property в официальной документации React — по ссылке
Для удобства использования таких компонентов, обычно предоставляется несколько способов рендера.
Рассмотрим два основных: свойство render и свойство children.
Создадим папку renderProps , в ней компонент displaySize.tsx и компонент windowQueries.tsx
Далее, опишем использование нашего компонента:
Описание свойства children для доступа к дочерним элементам (не обязательно):
Описание свойства с JSX элементом, может использоваться для компонентов разметки:
Заключение
Мы создали окружение для разработки на React и TypeScript с минимально необходимыми настройками, и написали несколько простых компонентов.
TypeScript позволяет отказаться от использования PropTypes, и проверяет свойства компонентов во время разработки и компиляции (PropTypes же выдает ошибки только в запущенном приложении).
Такое преимущество строгой типизации, как автодополнение, распространяется и на JSX, а в файлах — декларациях библиотеки React вы можете быстро увидеть все возможные свойства для встроенных JSX элементов.
В сложных проектах использование TypeScript полностью оправдает себя — мы увидим это в таких моментах, как использование Redux (благодаря интерфейсам для вашего store), и работа с внешним API.
В статье №2 мы рассмотрим следующее:
1) Подключение Redux
2) Стандартные рецепты React, Redux и TypeScript
3) Работа с API
4) Production и development сборка проекта
В последующих статьях автор планирует описать: создание прогрессивного веб-приложения (PWA), серверный рендеринг, тестирование с Jest, и наконец оптимизацию приложения.
Автор просит прощения за не самое удачное оформление статьи, и повторно просит вносить свои предложения, по улучшению восприятия и читаемости этой статьи.
Благодарю за внимание!
Update 22.10.2017: Добавлен рецепт lazy load компонентов
Update 17.02.2018: Добавлен рецепт компонента с render property, обновлены зависимости (для устранения ошибок с типом ReactNode)
Вы можете добавить в проекты поддержку TypeScript, используя пакет TypeScript SDK, который доступен по умолчанию в Visual Studio Installer или в виде пакета npm. Для проектов, которые разработаны в Visual Studio 2019, рекомендуется использовать пакеты npm TypeScript. Они обеспечивают лучшую переносимость между разными средами и платформами.
Добавление поддержки TypeScript с использованием npm
Пакет npm TypeScript позволяет включить поддержку TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
Следуя инструкциям, установите рабочую нагрузку разработки Node.js и среду выполнения Node.js.
Для самой простой интеграции с Visual Studio создайте проект с помощью одного из шаблонов Node.js для TypeScript, например шаблона пустого веб-приложения Node.js. Либо используйте шаблон Node.js для JavaScript, предоставляемый в Visual Studio, и следуйте инструкциям в этом разделе или используйте проект Открыть папку.
Установите пакет npm для TypeScript, если он еще не включен в ваш проект.
В Обозревателе решений (область справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам в узле npm в Обозревателе решений. Дополнительные сведения см. в разделе Управление пакетами npm.
Установить пакет npm TypeScript для проекта Node.js можно с помощью командной строки или IDE. Чтобы установить пакет с помощью IDE, щелкните правой кнопкой мыши узел npm в Обозревателе решений, выберите Установить новый пакет npm, найдите TypeScript и установите пакет.
Выберите параметр npm в окне Вывод, чтобы видеть ход установки пакета. Установленный пакет появится в узле npm в Обозревателе решений.
Если пакет не будет включен в проект, добавьте файл с расширением .tsconfig в корневой каталог проекта. Для этого щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите Файл конфигурации TypeScript JSON, а затем нажмите кнопку Добавить.
Visual Studio добавит файл tsconfig.json в корневую папку проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.
Откройте файл tsconfig.json и обновите его, задав необходимые параметры компилятора.
Ниже приведен пример простого файла tsconfig.json.
- include указывает компилятору, где искать файлы TypeScript (*.ts).
- Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.
- Параметр sourceMap указывает, нужно ли компилятору создать файлы sourceMap.
В приведенной выше конфигурации представлен пример базовой конфигурации TypeScript. Сведения о других параметрах см. в разделе о файле tsconfig.json.
Построение приложения
В проект добавьте файлы TypeScript ( .ts) или TypeScript JSX ( .tsx), а затем добавьте код TypeScript. В качестве простого примера TypeScript используйте следующий код:
В package.json включите поддержку команд сборки и очистки Visual Studio, используя приведенные ниже скрипты.
Если необходимо выполнить сборку с помощью стороннего средства, например webpack, можно добавить в файл package.json скрипт сборки для командной строки:
Пример использования webpack с React и файла конфигурации webpack см. в статье Учебник. Создание приложения Node.js и React в Visual Studio.
Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.
Если необходимо настроить такие параметры, как начальная страница, путь к среде выполнения Node.js, порт приложения или аргументы среды выполнения, щелкните правой кнопкой мыши узел проекта в Обозревателе решений и выберите Свойства.
При настройке сторонних средств в проектах Node.js не используются пути, заданные в разделе Средства > Параметры > Проекты и решения > Управление веб-пакетами > Внешние веб-инструменты. Эти параметры используются для проектов других типов.
Выберите Сборка > Собрать решение.
Хотя сборка приложения выполняется автоматически при его запуске, рассмотрим, что происходит в процессе сборки.
Если вы создали сопоставители с исходным кодом, откройте папку, указанную в параметре outDir, где вы найдете созданные файлы *.js, а также созданные файлы *js.map.
Файлы сопоставителей с исходным кодом требуются для отладки.
Выполнение приложения
Инструкции по запуску приложения после его компиляции см. в разделе Создание первого приложения Node.js.
Автоматизация задач сборки
Для автоматизации задач сторонних средств, таких как npm и webpack, вы можете использовать обозреватель запускателя задач в Visual Studio.
В этом руководстве вы узнаете, как создать простой проект TypeScript с нуля, без помощи стартового шаблона. Также мы поговорим о том, как работает компиляция в TypeScript и как использовать линтер в проекте TypeScript.
Требования
Для выполнения этого мануала вам понадобится:
- Последняя версия Node, установленная на вашем компьютере. Инструкции по установке зависят от вашего дистрибутива: mac OS, Debian, CentOS, Ubuntu.
- Умение работать с npm. Пакетный менеджер npm поставляется с Node. Чтобы узнать больше о работе с npm, ознакомьтесь с руководством Управление модулями Node.js с помощью npm и package.json.
1: Инициализация проекта TypeScript
Чтобы начать разрабатывать свой проект TypeScript, нужно создать каталог для хранения файлов:
Перейдите в него:
Сюда вы можете установить TypeScript:
npm i typescript --save-dev
Установив TypeScript, вы можете инициализировать свой проект, используя следующую команду:
npm также включает инструмент под названием npx, который запускает исполняемые пакеты без необходимости устанавливать их глобально.
Мы используем здесь команду tsc, потому что это встроенный компилятор TypeScript. Когда вы пишете код на TypeScript, команда tsc преобразует или компилирует код в JavaScript.
Откройте файл tsconfig.json в любом редакторе кода, и вы увидите следующие конфигурации по умолчанию:
Многие конфигурации по умолчанию будут закомментированы. Приведенные выше параметры определяют версию JavaScript, в которую будет скомпилирован TypeScript, и ожидаемую систему модулей для скомпилированной программы. Параметр strict со значением true включает широкий диапазон правил проверки типов. Это означает, что ваша программа TypeScript будет содержать меньше ошибок.
Вы можете внести свои правки в конфигурацию TypeScript. Откройте файл tsconfig.json и добавьте следующие пары ключ-значение:
Если присвоить outDir значение dist, при компиляции будет создана папка по имени dist. При запуске команды npx tsc для компиляции файла TypeScript скомпилированный файл JavaScript будет помещен в файл dist.
Также при компиляции файла TypeScript будет создан sourcemap – это файл, который сопоставляет новый скомпилированный файл JavaScript с исходным файлом TypeScript. Если в вашем коде есть ошибки или вам необходимо внести изменения, лучше отлаживать исходный код, а не скомпилированный. Вот почему полезны файлы sourcemap. Установив для параметра sourceMap значения true, вы сможете быстро устранять ошибки в исходном файле TypeScript.
Переходим к написанию кода приложения TypeScript и его компиляции.
2: Компиляция проекта TypeScript
Прежде чем приступить к написанию кода своего проекта TypeScript, создайте в проекте typescript папку src, а внутри src создайте файл index.ts.
Затем откройте index.ts в редакторе кода и вставьте в этот файл следующий код TypeScript:
Имея этот код, index.ts готов к компиляции:
npx tsc index.ts
Вы заметите, что в папку dist были добавлены скомпилированный JavaScript-файл index.js и файл sourcemap index.js.map.
Откройте index.js, и вы увидите следующий скомпилированный код JavaScript:
Запускать компилятор TypeScript каждый раз, когда вы вносите изменения, довольно утомительно. Чтобы избежать этого, вы можете перевести компилятор в режим наблюдения. В этом режиме файл TypeScript будет перекомпилироваться каждый раз после внесения изменений.
Вы можете активировать режим наблюдения с помощью следующей команды:
Итак, вы знаете, как работает компилятор TypeScript, и можете компилировать файлы. Пора вывести свой проект TypeScript на новый уровень, внедрив в свой рабочий процесс линтер.
3: Настройка TSLint для проекта TypeScript
Использование линтера при написании кода поможет вам быстро выявить несоответствия, синтаксические ошибки и упущения. Стандартный линтер TypeScript называется TSLint (он считается устаревшим и вместо него рекомендуется использовать ESLint).
Чтобы установить TSLint, выполните следующую команду:
npm i tslint --save-dev
TSLint установлен. Чтобы настроить его для работы с вашим проектом, выполните следующую команду для инициализации:
npx tslint --init
Команда инициализации TSLint создаст файл tslint.json, в нем хранятся все конфигурации TSLint в tslint.json. Откройте tslint.json в редакторе кода. Вы увидите следующие стандартные конфигурации:
Линтеры подчеркивают ошибки в коде. Чтобы включить это поведение в редакторе кода, необходимо установить расширение TSLint.
Примечание: Если после установки расширение не будет работать, попробуйте установить в редакторе расширение ESLint.
Вернитесь в файл index.ts в редакторе кода. Вы заметите, что в двух местах появилось подчеркивание: одинарные кавычки должны быть двойными, а сам файл должен заканчиваться новой строкой. Оба этих замечания не являются ошибками как таковыми, это стилистические рекомендации, которые отслеживает TSLint. Вы можете изменить это поведение в файле tslint.json. Это делается в рамках пары ключ-значение rules:
Допустим, вы не хотите включать новую строку в конец каждого файла. Вы можете отключить эту рекомендацию с помощью правила eofline. Установите для eofline значение false, после чего подчеркивание пропадет:
Вам не нужно вручную устанавливать каждое правило, которое вы хотите добавить. TSLint поддерживает ряд широко известных конфигураций, которые вы можете просто интегрировать в свой файл. Руководство по написанию кода от Airbnb – это надежный набор настроек, которым доверяют многие разработчики.
Чтобы использовать руководство по стилю Airbnb, сначала необходимо установить его:
npm install tslint-config-airbnb
Установив его, нужно убедиться, что конфигурации в tslint.json поддерживают его. Ключ extends должен указывать на недавно установленный tslint-config-airbnb:
4: Использование gts
Чтобы протестировать gts, давайте попробуем создать новую папку проекта. Когда папка проекта будет готова, инициализируйте gts с помощью следующей команды:
Приведенная выше команда сгенерирует все, что вам нужно для начала работы с TypeScript, включая файл tsconfig.json и настройку линтинга. Также она создаст файл package.json, если его еще нет.
Кроме того, команда npx gts init добавит в файл package.json полезные сценарии npm. Например, теперь для компиляции вашего проекта TypeScript вы можете запустить команду npm run compile. Чтобы проверить наличие ошибок с помощью линтера, вы можете запустить npm run check.
Примечание: Изучите документацию по gts, чтобы узнать, как интегрировать gts с линтером ESLint.
Теперь TSLint будет следовать правилам линтинга, установленным gts.
Итак, gts установлен и интегрирован в ваш проект TypeScript. Используя gts, вы сможете быстро создавать новые проекты TypeScript с необходимыми конфигурациями.
Заключение
В этом руководстве вы создали простой проект TypeScript с пользовательскими конфигурациями. Вы также интегрировали Google TypeScript Style в свой проект TypeScript. Инструмент gts поможет вам быстро приступить к работе с новым проектом TypeScript. Благодаря gts вам не нужно вручную настраивать конфигурацию или интегрировать линтер в рабочий процесс.
Мы расскажем об истории создания и особенностях синтаксиса TypeScript, а также приведем список литературы для более полного погружения в тему и развития навыков программирования.
История TypeScript
По мере развития интернета и браузеров JavaScript стал все чаще использоваться для разработки сайтов. Из-за кажущейся простоты языка в приложениях возникало много ошибок, что привело к проблемам с поддержкой. Появление TypeScript было обусловлено недостатками JavaScript и сложностями при разработке программ. Индустрии требовалось что-то близкое, но с более развитыми инструментами для поиска и устранения ошибок еще до запуска кода в продакшен. К счастью, способ решения задачи давно известен – нужно сделать язык более или менее жестко типизированным.
По сути это типизированное надмножество JavaScript, предназначенное для выявления ошибок на этапе компиляции. Программа на TypeScript компилируется в простой код JavaScript, который выполняется в любом браузере. Разрабатывается язык программирования как проект с открытыми исходными текстами, потому использовать его может любой желающий бесплатно и без особых ограничений.Ориентирован TypeScript на прикладные задачи – он помогает кратко и точно выражать идеи (писать более читаемый код), а также обеспечивает масштабируемость и безопасность приложений. Эта надстройка вокруг основного языка JavaScript дает разработчикам статическую типизацию и приведение типов.
Главные преимущества TypeScript:
- Если тип переменной не поддерживает некую операцию, компилятор выдаст ошибку.
- Читаемость кода упрощает разработчикам поддержку чужих приложений.
- Если код компилируется, скорее всего он работает.
- При внесении правок в код среда сразу укажет на измененные классы и функции, а также предупредит об ошибках компиляции (упрощается рефакторинг).
Начало работы с TypeScript
Чтобы писать код на TypeScript, можно использовать любой текстовый редактор. Многие среды разработки (например, Visual Studio Code) поддерживают этот язык из коробки. Основная идея TypeScript – компиляция в JavaScript, а сам компилятор устанавливается с помощью менеджера пакетов npm в Node.jsЧтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio.
Установка через NPM
Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду:
В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo:
Для начала можно потренироваться в онлайн-версии TypeScript – для этого ничего устанавливать не нужно и сразу виден результат.Использование Visual Studio
Если при инсталляции IDE отметить опцию "Node.js development", установятся все средства для работы с TypeScript.
Синтаксис TypeScript
В TypeScript есть разные типы переменных, а проверка корректности значений перед обработкой позволяет сделать поведение кода более предсказуемым. Язык модули, функции, переменные, операторы и выражения, а также комментарии.
Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной.
Основные типы данных:
| Ключевое слово | Тип данных | Описание | Пример кода |
| Any | Динамичный | Описывает данные, тип которых может быть неизвестен на момент написания приложения. | let AnyVar: any = "green"; console.log(AnyVar); // сейчас AnyVar – это string AnyVar = 30; console.log(AnyVar); // сейчас AnyVar – это number |
| Number | Числовой | Целые числа или числа с плавающей запятой | let decimal: number = 6; |
| String | Строчный | Последовательность символов Unicode | let color: string = "blue"; color = 'grey'; |
| Boolean | Логический | Используется для логических значений true и false | let isDone: boolean = false; |
| Void | Void | Отсутствие конкретного значения. Используется для функций, которые не возвращают значений | button.onclick = () => void doSomething(); |
| Null | Null | Используется, когда переменная определена (например, строка или число), а значение неопределенно. | let x: null = null; console.log(x); |
| Undefined | Undefined | Используется для всех неинициализированных переменных | let x: undefined = undefined; console.log(x); |
Большинство из этих типов соотносится с примитивными типами из JavaScript.
> – комплексный объект, которому можно определить свойства или индикатор:
Рассмотрим пример кода:
Во второй строке мы получим ошибку, поскольку объект person имеет два свойства name и age . Должно быть соответствие по названиям, количеству и типу свойств.
Array используется для определения типов элементов массива.
Указать тип можно двумя способами: Array <T> и T[ ]
Массив чисел Number [ ]
Массив строк Array <string>:
Enum – перечисление, возможность дать имена наборам числовых значений:
Кортежи в TypeScript имеют фиксированное количество элементов определенных типов:
Type 'string' is not assignable to type 'number'.
Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные.
Для определения классов поддерживаются модификаторы контроля доступа public , protected и private :
Класс, название, атрибуты:
Тот же класс, вместе с модификаторами:
Идентификаторы в TypeScript – это имена переменных, функций и других элементов кода. Идентификаторы могут содержать буквы, цифры и некоторые спецсимволы ('_' и '$'). Цифра не может стоять в начале идентификатора.Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы.
Например, Name_one , Name_1 , Name1 , Name$ .
TypeScript чувствителен к регистру, а использование точки с запятой в нем необязательно. Каждая строка инструкции называется оператором, одна строка может содержать несколько операторов и вот тогда их нужно разделять точкой с запятой.
Комментарии повышают читаемость кода. С их помощью удобно оставлять информацию об авторе кода, подсказки по конструкциям и др.Hello world
TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно).
- Создаём базовый файл index.html
- Создаем файл с расширением HelloWorld.ts и добавляем в него следующую строку:
- Компиляция. Чтобы преобразовать наш файл в файл на JavaScript нужно в командной строке запустить:
6 книг по TypeScript для углубленного изучения
Мануал по TypeScript занимает всего 10 страниц. Восполнить пробелы помогут книги с задачами и описаниями чужого опыта. Больше практики, меньше теории.
- «Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений», Борис Черный.
- «Эффективный TypeScript: 62 способа улучшить код», Дэн Вандеркам.
- «Изучаем TypeScript 3», Натан Розенталс.
- «TypeScript», Jesse Russell, Ronald Cohn.
- «Angular и TypeScript. Сайтостроение для профессионалов», Яков Файн, Антон Моисеев.
- Бесплатное пособие «TypeScript Deep Dive».
Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!
Читайте также: