Espruino:Примеры/Typescript и Visual Studio Code: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Нет описания правки
Нет описания правки
Строка 5: Строка 5:
=Typescript и Visual Studio Code<ref>[https://www.espruino.com/Typescript+and+Visual+Studio+Code+IDE www.espruino.com - Typescript and Visual Studio Code IDE]</ref>=
=Typescript и Visual Studio Code<ref>[https://www.espruino.com/Typescript+and+Visual+Studio+Code+IDE www.espruino.com - Typescript and Visual Studio Code IDE]</ref>=


Typescript – это язык программирования, расширяющий возможности JavaScript. В нём поддерживается аннотация типов, а также вывод типов. Кроме того, он может компилировать более современные версии ECMAScript в версии постарше вроде ES5.
[[Typescript]] – это язык программирования, расширяющий возможности [[JavaScript]]. В нём поддерживается аннотация типов, а также вывод типов. Кроме того, он может компилировать более современные версии ECMAScript в версии постарше вроде [[ES5]].


Visual Studio Code – это «лёгкий» редактор кода, в котором поддерживается автодополнение ввода, подсветка синтаксиса и рефакторинг кода.
[[Visual Studio Code]] – это ''«лёгкий»'' редактор кода, в котором поддерживается автодополнение ввода, подсветка синтаксиса и рефакторинг кода.


В этом руководстве мы расскажем, как при помощи языка Typescript и редактора Visual Studio Code IDE компилировать Typescript-код в ES5-код (JavaScript 5).
В этом руководстве мы расскажем, как при помощи языка [[Typescript]] и редактора [[Visual Studio Code IDE]] компилировать [[Typescript]]-код в [[ES5]]-код ([[JavaScript 5]]).


Клон рабочего примера можно сделать [https://github.com/stasberkov/espruino-ts-quickstart отсюда].
Клон рабочего примера можно сделать [https://github.com/stasberkov/espruino-ts-quickstart отсюда].


В нашем проекте задачи сборки будут запускаться с помощью gulp, компиляция Typescript-кода в JavaScript-код будет выполняться с помощью Typescript, а подготовка кода для Espruino и его загрузка на плату – при помощи espruino-cli.  
В нашем проекте задачи сборки будут запускаться с помощью [[gulp]], компиляция [[Typescript]]-кода в [[JavaScript]]-код будет выполняться с помощью [[Typescript]], а подготовка кода для [[Espruino]] и его загрузка на плату – при помощи [[espruino-cli]].  


Описание типов данных Typescript для Espruino взято из [https://www.npmjs.com/package/@types/espruino этого пакета].  
Описание типов данных [[Typescript]] для [[Espruino]] взято из [https://www.npmjs.com/package/@types/espruino этого пакета].  


== Как использовать ==
== Как использовать ==


Установите Visual Studio Code, nodejs v6+.
Установите [[Visual Studio Code]], [[nodejs v6+]].


Скопируйте [https://github.com/stasberkov/espruino-ts-quickstart вот этот модуль] в директорию «espruino-ts-quickstart». Внутри этой директории запустите команду npm install. Она должна установить все необходимые модули.
Скопируйте [https://github.com/stasberkov/espruino-ts-quickstart вот этот модуль] в директорию ''«espruino-ts-quickstart»''. Внутри этой директории запустите команду '''npm install'''. Она должна установить все необходимые модули.


Затем внутри директории «espruino-ts-quickstart» запустите команду code.
Затем внутри директории '''«espruino-ts-quickstart»''' запустите команду '''code'''.


Это запустит редактор Visual Studio Code и откроет проект.
Это запустит редактор [[Visual Studio Code]] и откроет проект.


[[File:Typescript_and_Visual_Studio_Code_IDE_main-screen.png|center]]
[[File:Typescript_and_Visual_Studio_Code_IDE_main-screen.png|center]]


У этого проекта 3 задачи сборки: build, espruino-console и send-to-espruino-console. Чтобы получить к ним доступ, нажмите Ctrl+Shift+B.
У этого проекта 3 задачи сборки: '''build''', '''espruino-console''' и '''send-to-espruino-console'''. Чтобы получить к ним доступ, нажмите {{клавиша|Ctrl}}+{{клавиша|Shift}}+{{клавиша|B}}.


[[File:Typescript_and_Visual_Studio_Code_IDE_build-commands.png|center]]
[[File:Typescript_and_Visual_Studio_Code_IDE_build-commands.png|center]]


Команда build компилирует TS-код в JavaScript-код и подготавливает его для использования в Espruino.
Команда '''build''' компилирует TS-код в [[JavaScript]]-код и подготавливает его для использования в [[Espruino]].


[[File:Typescript_and_Visual_Studio_Code_IDE_build-output.png|center]]
[[File:Typescript_and_Visual_Studio_Code_IDE_build-output.png|center]]


Команда espruino-console запускает консоль Espruino (скачайте из репозитория и настройте конфигурационный файл env-config.yaml).
Команда '''espruino-console''' запускает консоль [[Espruino]] (скачайте из репозитория и настройте конфигурационный файл '''env-config.yaml''').


[[File:Typescript_and_Visual_Studio_Code_IDE_espruino-console.png|center]]
[[File:Typescript_and_Visual_Studio_Code_IDE_espruino-console.png|center]]


Команда send-to-espruino-console загружает скомпилированный файл на плату (перед использованием этой команды запустите консоль Espruino). Запустив эту команду, переключитесь обратно на вид espruino-console.
Команда '''send-to-espruino-console''' загружает скомпилированный файл на плату (перед использованием этой команды запустите консоль [[Espruino]]). Запустив эту команду, переключитесь обратно на вид '''espruino-console'''.


== Структура проекта ==
== Структура проекта ==


Файл src/app.ts – код-пример для компиляции и выполнения.
Файл '''src/app.ts''' – код-пример для компиляции и выполнения.


Файл app-config.yaml – файл для настройки приложения. Используется для генерации файла с исходным кодом src/app-config.ts, который можно использовать в коде.
Файл '''app-config.yaml''' – файл для настройки приложения. Используется для генерации файла с исходным кодом '''src/app-config.ts''', который можно использовать в коде.


Файл app-config.user.yaml – файл для перезаписи настроек приложения (не для git-файла). Значения этого файла будут использоваться вместо соответствующих значений в файле app-config.yaml.
Файл '''app-config.user.yaml''' – файл для перезаписи настроек приложения (не для git-файла). Значения этого файла будут использоваться вместо соответствующих значений в файле '''app-config.yaml'''.


Файл gulpfile.js – файл с задачами сборки.
Файл '''gulpfile.js''' – файл с задачами сборки.
 
<syntaxhighlight lang="javascript" enclose="div">
 
</syntaxhighlight>


=См.также=
=См.также=

Версия от 18:16, 13 июля 2021

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Typescript и Visual Studio Code[1]

Typescript – это язык программирования, расширяющий возможности JavaScript. В нём поддерживается аннотация типов, а также вывод типов. Кроме того, он может компилировать более современные версии ECMAScript в версии постарше вроде ES5.

Visual Studio Code – это «лёгкий» редактор кода, в котором поддерживается автодополнение ввода, подсветка синтаксиса и рефакторинг кода.

В этом руководстве мы расскажем, как при помощи языка Typescript и редактора Visual Studio Code IDE компилировать Typescript-код в ES5-код (JavaScript 5).

Клон рабочего примера можно сделать отсюда.

В нашем проекте задачи сборки будут запускаться с помощью gulp, компиляция Typescript-кода в JavaScript-код будет выполняться с помощью Typescript, а подготовка кода для Espruino и его загрузка на плату – при помощи espruino-cli.

Описание типов данных Typescript для Espruino взято из этого пакета.

Как использовать

Установите Visual Studio Code, nodejs v6+.

Скопируйте вот этот модуль в директорию «espruino-ts-quickstart». Внутри этой директории запустите команду npm install. Она должна установить все необходимые модули.

Затем внутри директории «espruino-ts-quickstart» запустите команду code.

Это запустит редактор Visual Studio Code и откроет проект.

У этого проекта 3 задачи сборки: build, espruino-console и send-to-espruino-console. Чтобы получить к ним доступ, нажмите  Ctrl + ⇧ Shift + B .

Команда build компилирует TS-код в JavaScript-код и подготавливает его для использования в Espruino.

Команда espruino-console запускает консоль Espruino (скачайте из репозитория и настройте конфигурационный файл env-config.yaml).

Команда send-to-espruino-console загружает скомпилированный файл на плату (перед использованием этой команды запустите консоль Espruino). Запустив эту команду, переключитесь обратно на вид espruino-console.

Структура проекта

Файл src/app.ts – код-пример для компиляции и выполнения.

Файл app-config.yaml – файл для настройки приложения. Используется для генерации файла с исходным кодом src/app-config.ts, который можно использовать в коде.

Файл app-config.user.yaml – файл для перезаписи настроек приложения (не для git-файла). Значения этого файла будут использоваться вместо соответствующих значений в файле app-config.yaml.

Файл gulpfile.js – файл с задачами сборки.

См.также

Внешние ссылки