Компеляция TypeScript при помощи редактора

[IgorKulishov]

В прошлом уроке мы видели как компелировать typescript файл в javascript при помощи tsc. В этом уроке мы увидем как запускать компелятор изнутри редактора Visual Studio Code. Запуск компелятора производится сочетанием клавиш Ctrl+Shift+B

Что бы найти эту команду Visual Studio Code можно так же нажать Ctrl+Shift+P и вверху появится строка поиска команд. В поиске команд напечатать Build и ты увидешь подсказку команды Ctrl+Shift+B.

Когда используешь команду Build (Ctrl+Shift+B) первый раз, вверху появится сообщение "No task runner configured". И кнопка "Configure task runner" После нажатия кнопки "Configure task runner" повится dropdown лист , выбери из перечня опцию TypeScript, после чего создастся и откроется файл tasks.json внутри папки .vscode. В этом файле конфигурация билда.

Для эксперимента желательно создать typescript файл заранее (к примеру app.ts), который будет конвертироваться в js файл (в данном примере app.js).

Конфигурация внутри файла выглядет примерно так:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["app.ts"],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

В данном примере "args" указывает на файл app.ts который находится в корне проекта. После того как ты проделаешь создашь файл app.ts в корне проекта, создашь

Напиши свои наблюдения, задай вопрос.

[g1er]

Хм... не получилось у меня скомпилировать из редактора. Пишет "Задачи доступны только в папке рабочей области". Я не совсем понял, что он имеет в виду, поэтому не знаю, что сделать для отладки

[IgorKulishov]

Удалось ли тебе создать файл tasks.json можно сбросить сюда содержимое файла?

[IgorKulishov]

Я обновил объяснение вверху, добавил конфигурацию на примере app.ts. Попробуй еще раз и напиши мне свои наблюдения.

[IgorKulishov]

Внутри рабочей папке после компеляции ты должен получить:

app.ts
app.ts
.vscode
     |__tasks.json

[g1er]

Я создал отдельную новую папку на диске, в ней создал app.ts, внутри код из предыдущего урока №15, а именно:

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Я открываю этот файл (app.ts) в VSCode с указанным выше кодом, нажимаю Ctrl+Shift+B, и мне редактор выдает во всплывающем в правом нижнем углу окошке текст "Задачи доступны только в папке рабочей области". И больше ничего. В самой папке, где содержится app.ts больше никаких файлов я не создавал. В предыдущем задании, когда я компилил через командную строку, после компиляции у меня появился в папке только новый скомпилинный файл app.js. Сейчас ничего не происходит, ничего не добавляется и не появляется. Мне надо самому создать в папке .json файл и прописать в нем указанный тобой выше в пояснении код? Или все файлы и папки, кроме исходного app.ts должны появиться сами после компиляции? Может я какие-то настройки не настроил или еще что? Я просто не понимаю что редактор хочет, чтобы я сделал.

[IgorKulishov]

Перед тем как произойдет компиляция в нашей корневой папке проекта должны находиться : А) app.ts Б) папка .vscode с файлом tasks.json внутри

А после компиляции должен появится app.js (так же в корневой папке).

Я ожидал, что редактор создаст сам при первом запуске tasks.json, но поскольку этого не произошло, нам предстоит создать его вручную и поместить конфигу (см ниже подробнее).

Детали:

1. не уверен что это имеет значение, однако при открытии проекта в редакторе попробуй открыть (указать) именно новую папку, которую ты создал для проекта.
2. в корневой папке помести новый файл app.ts
3. в корневой папке создай папку .vscode, далее создай и помести в него файл tasks.json (который должен был по идее создаться автоматически с помощью редактора, однако по какой-то причине этого не происходит). Скопируй внутрь его следующее:

   {
   "version": "0.1.0",
   "command": "tsc",
   "isShellCommand": true,
   "args": ["app.ts"],
   "showOutput": "silent",
   "problemMatcher": "$tsc"
   }

Я ожидал, что при нажатии Ctrl+Shift+B при первоначальном отсутствии конфигурационного файла, повятся: а) сообщения "No task runner configured" б) и кнопка "Configure task runner" И после нажатия кнопки "Configure task runner", ожидал, что будет автоматически создан конфигурационный файл tasks.json.

4. Нажми Ctrl+Shift+B

5. после завершения компеляции должен появиться файл app.js и app.js.map

[IgorKulishov]

Если получиться для интереса можно поместить в исходный app.ts файл такой код:

class Machine {
}
var newMachine = new Machine();

[g1er]

Я все-таки разобрался с проблемой, методом тыка. Открываю VSC, во вкладке Файл выбираю "Добавить папку в рабочую область", в открывающемся окне выбираю свою специально созданную папку с одним файлом app.ts, нажимаю "Добавить". Слева в проводнике VSC отображается моя папка с вложенным в ней файлом app.ts, рабочая область называется "Без названия". Нажимаю Ctrl+Shift+B, сверху выходит пустая командная строка, во всплывающей снизу подсказке пишется "Задача сборки для запуска отсутствует. Настройте задачи сборки.." Нажимаю на эту строку. Сновa открывaется пустaя комaнднaя строкa, во всплывающей снизу подсказке пишется «Создaть фaйл tasks.json из шаблона». Нажимaю эту строку, командная строкa предлагает мне выбрать шаблон из следующих вариантов: MSBuild Maven .NET Core others При выборе любого из этих вариантов в основной папке создаётся еще однa пaпкa с названием .vscode, в которой находится файл tasks.json. Но внутренний код не соответствует тому коду, который ты написал выше. Мне пришлось вручную заменить код нa твой. Кроме того, в самом твоем коде пришлось сделать попрaвку: в строке version я изменил значение с твоего 0.1.0 нa 2.0.0, иначе редактор ругался. И после этого я нaжaл Ctrl+shit+B и прошла компиляция. В основной папке появился файл app.js. Вот тaкaя процедурa

[IgorKulishov]

Отлично, предлагаю переходить теперь к следующему заданию, где предстоит настроить еще один конф файл и после чего займемся уже кодом.