УСТАНОВКА TYPESCRIPT В VISUAL STUDIO CODE
TypeScript это полностью совместимый язык с JavaScript. Это означает что вы можете взять код на JavaScript, и он будет полностью валидный в любой среде TypeScript. Но помимо стандартного JavaScript, TypeScript – это мощный экзоскелет JavaScript-а.
JavaScript
TypeScript
Настройка среды
Есть несколько способов как работать с TypeScript. Сам TS (сокращенно от TypeScript) это препроцессор поэтому мы должны поставить какую-нибудь среду для работы с ним.
- Самый простой способ «поиграться с typescript» — это перейти на сайтwww.typescriptlang.org/play/
2. Способ второй можно скачать абсолютно беспутную и мощную IDE (intelligent developmentenvironment) от Microsoft по ссылке https://www.visualstudio.com/ru/ название IDE — Visual StudioCommunity 2017 при этом TS плагин уже встроен в неё. Если вы уже пользуетесь напримерVS2015 и плагина для работы с TS еще нет, то скачать его можно по ссылке под видеоhttps://www.microsoft.com/ru-ru/download/details.aspx?id=48593 или наберите в поисковой строкеgoogle-а «typescript for visual studio»
3. Способ третий можно использовать любой редактор кода. Обычно редакторы проще IDE и весят меньше, да и почти не нагружают вашу систему, поэтому редакторы иногда использовать удобнее. Я рекомендую использовать еще один мощный и бесплатный продукт опять же от Microsoft, который называется visual studio code. Данный редактор кроссплатформенный и доступен как для мак так и для линукс. Хорошо, что Бил Гейтс ушел на пенсию, друзья. Это побудило MS изменить политику в опенсорсную сторону. Ссылка для скачивания:https://code.visualstudio.com/ также найдете под видео. Установите visual studio code как обычно.
После установки откройте редактор visual studio code и перейдите во вкладку File-> open folder. В открывшемся диалоговом окне выберите расположение будущей папки и создайте её. Например, с именем “Test”, после чего нажмите ок.
В обозревателе решения наведите на папку Test и нажмите на иконку добавить файл.
Добавьте два файла index.html и App.ts (app это сокращение от слова application)
Давайте сделаем красивую тему для файлов. (Внимание — это пункт вы можете пропустить.)
Мне не нравится бедный стиль фалов, которые выглядят сейчас довольно скучно. Давайте изменим стиль отображения файлов в обозревателе решения.
Для этого нажмите сочетание клавиш shift + ctrl + p и напечатайте “icon”
Обратите внимание из списка настроек мы видим надпись «Preferences: File Icon Theme»
Выберите этот пункт и нажмите “enter”. Появится еще один список где вы можете видеть доступные темы для файлов. Я люблю тему “Seti (Visual Studio Code)” – минимально и симпатично. Выберите её и нажмите “enter”.
Обратите внимание как преобразовались значки, стало намного интереснее, теперь видны цветные обозначения типов. Если темы из списка Вам не нравятся, то вы можете выбрать любую доступную тему, сделанную сообществом.
Другой способ установить тему, более консервативный. Нажмите на File-> References -> settings
Появятся два окна слева предопределенные настройки самого редактора, а справа окно где вы можете перезаписать эти стандартные настройки. Поэтому просто добавьте строчку кода
|
1
2
3
|
<span style=«font-family: arial,helvetica,sans-serif;»>{
«workbench.iconTheme»: «vs-seti»
}</span>
|
Node
Так называемая нода, друзья мои (показать официальный сайт) вот её сайт. Возможно Вы уже слышали про неё. Все фронтенд разработчики работают с ней.
Итак для начала установите Node.js (официальный сайт https://nodejs.org/en/)
На сайте найдите ссылки для скачивания node.js. Download for windows в моем случае.
Версии могут отличаться на момент записи видео. Нажмите на одну из ссылок, например, “Recommented For most Users” или “ Lastest Featurs”. Я выберу «Lastest Featurs». После скачивания файла установите его как обычно нажимая «далее». На линукс и маке установка может отличаться. На этом же сайте всё подробно расписано.
После установки можете проверить, что всё установилось верно. Для этого перезапустите visual studio code, т.е. закройте и откройте заново. Потом перейдите во вкладку View -> Intergratedterminal.
В терминале наберите node –v (что означает version). Если всё хорошо в терминале появится версия node.js. Также за одно можете посмотреть версию пакетного менеджера, который прилагается при установке ноды. Npm –v (NPM это node package manager т.е. пакетный менеджер ноды)
Теперь еще одна установка на наш компьютер на этот раз сам typescript компилятор (Официальное описание процесса можно посмотреть по ссылке http://www.typescriptlang.org/).
В этом же открытом терминале visual studio code наберите команду npm install –g что означаетglobal далее typescript и нажмите enter.
|
1
|
<span style=«font-family: arial,helvetica,sans-serif;»>npm install —g typescript</span>
|
У меня TypeScript уже установлен, поэтому у Вас могут быть другие сообщения. Главное, чтобы не было ошибок красного цвета.
Наконец мы можем запустить наш ts файл для этого в терминале Visual studio code наберите tscapp. Расширение файла можно не вводить компилятор TypeScript настроен таким образом, что по умолчанию принимает файлы с расширением TS.
В результате получим файл app.js. Если файл не появился, то нажмите на иконку обновить в обозревателе решения.
Добавим watcher
Добавим задачу watcher. С помощью этой задачи программа будет автоматически компилировать TypeScript файлы в JavaScript всегда, когда мы их измаем и нам не придется всё время прописывать команды в консоли.
Нажмите сочетание клавиш shift + ctrl + p наберите слово “Tasks”. Выберите “Run Build Task” и нажмите Enter.
Выберите “Configure Build Task”
Выберите TypeScript – Watch Mode
После чего у Вас должен появится файл tasks.json.
Потом нажмите F5 и в появившемся списке выберите node.js
В терминале Visual Studio Code наберите команду tsc –init
Данная команда сформирует еще один файл настроек для TS. Фактически это главный файл настроек для компилятора TypeScript. Остальные файлы, который мы добавили отвечают за настройки редактора.
Ну всё наконец среда готова для работы.
Далее просто нажмите shift + ctrl + p и наберите Tasks: Run Build Task.
Теперь все файлы TS будут автоматически компилироваться в JavaScript
Next Post