Конфигурационный файл tsconfig.json

IgorKulishov commented 6 years ago

Мы изучили в прошлом уроке, что внутри нашего проекта нам необходимо создать папку .vscode внутри которой разместить конфигурационный файл tasks.json для авто-билда, который указывает маршрут к исходным файлам ts:

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

В данном уроке мы познакомимся еще с одним конфиг-ным файлом, который присутствует во-всех typescript проектах (независимо от редактора): tsconfig.json. Файл tsconfig.json должен находиться внутри папки с исходным typescript кодом (в верхней / головной папке, где находятся все исходные typescript файлы), этот файл указывает следующие и многие другие параметры: а) target - в какую версию JavaScript (ES5 или ES6) компилировать typescript код б) outDir - путь куда копировать откомпелированные JS файлы (в нашем примере, предположим мы создали папку "js") в) sourceMap - надо ли создавать так называемые "map" (app.js.map) файлы, которые позволяют в браузере показать и дебагить исходный код в синтаксисе typescript. Пример файла tsconfig.json :

{
  "compilerOptions": {
     "target":"es5",
     "outDir": "js",
     "sourceMap": true
  }
}

Если мы хотим что бы все исходные typescript файлы компилировались и сохранять в один javascript файл (на выходе), к примеру "app.js" внутри папки "js" (что тоже возможно, т.е. все исходные файлы будут объединены в один файл на выходе, что удобно - в итоге один файл "app.js" будет вызван внутри файла index.html внутри тэга ), то надо использовать параметр "outFile":

{
  "compilerOptions": {
     "target":"es5",
     "outFile": "js/app.js",
     "sourceMap": true
  }
}

Проделаем небольшую реструктуризацию проекта из предыдущего задания.

Создадим две папки: "ts" и "js", таким образом все исходные файлы будут храниться в папке "ts" , а все откомпелированные файлы будут сохраняться с папку "js".
Скопируем наш исходный app.ts файл внутрь папки "ts".
Создадим и поместим в папку "ts" наш новый конфигурационный файл tsconfig.json:
```
{
"compilerOptions": {
 "target":"es5",
 "outDir": "../js",
 "sourceMap": true
}
}
```
Примечание: как ты обратил внимание внутри свойства outDir мы указывает две точки перед косой чертой указывая путь: "../js", две точки и косая черта показывают что мы переходим вверхнюю папку или в родительскую папку или одним уровнем выше в директории (т.е. если нам надо подняться на два уровня выше это будет выглядеть как "../../" три уровня "../../../". В данном примере надо пониматься что конф файл tsconfig.json находится внутри папки "ts", поэтому что бы попасть в папку "js" нам надо сначала перейти в корневую папку проекта (одним уровнем выше), т.е. нам надо перейти / подняться на один уровень выше для этого и используется две точки перед косой чертой.
расположение папки .vscode с конфигурационным файлом tasks.json внутри (из предыдущего задания), оставим на том же месте без изменения - в корневой папке проекта. Однако в сам конфигурационный файл tasks.json внесем изменения: Для того что бы указать редактору, что исходные *.ts файлы находятся в папке "ts" нам надо будет в конфигурационном файле tasks.json указать в свойстве "args": ["-p", "ts"] , где -p это аргумент и "ts" папка в которой находятся исходные ts файлы (или файл):
```
{
"version": "2.0.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "ts"],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
```

Еще раз как будут выглядеть файлы перед началом компеляции:

/ ts / 
   |
   |__tsconfig.json
   |__app.ts

/ js / 
  |
  |__(пустая папка в которой после компеляции появится "app.js")

/ .vscode /
     |
     |__tasks.json

После компеляции появиться файл app.js:

/ ts  / 
   |
   |__tsconfig.json
   |__app.ts

/ js / 
  |
  |__app.js

/ .vscode /
     |
     |__tasks.json

Все готово для того что бы откомпелировать исходный ts/app.ts в js/app.js файл.

В этом упражнении настроить пути конфигурационных файлов так что бы в итоге после компеляции app.js появился внутри папки js (кроме того если ты указал "sourceMap": true , то должен появиться файл app.js.map).

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

IgorKulishov commented 6 years ago

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

g1er commented 6 years ago

Я сделал все, описанное выше. Файл скомпилился в app.js без проблем. Все изменения я залил на гит, в твою созданную папку typescript.

Кстати, мне VSCode в файле tasks.json подсказывает, что "Свойство isShellCommand является устаревшим. Используйте свойство типа задачи и свойство оболочки в параметрах. Также см. заметки о выпуске для версии 1.14.", и что "Свойство showOutput является устаревшим. Используйте свойство reveal в свойстве presentation вместо этого свойства. Также см. заметки о выпуске для версии 1.14.". Я так понимаю, что это не критическая ошибка, а просто рекомендация идти в ногу со временем?

IgorKulishov commented 6 years ago

Да это рекомендация. Это значит что моя версия устарела. Рекомендую проапгрейдить.

IgorKulishov commented 6 years ago

Какая у тебя версия (для проверки в командной строке: tsc -v Вот тут вот версии typescript: https://www.npmjs.com/package/typescript

g1er commented 6 years ago

У меня версия 2,8,1. При установке мне сообщили о новой версии и предложили обновить

g1er / Andrew

Конфигурационный файл tsconfig.json #17