TypeScript - новый язык с открытым исходным кодом, который является надмножеством JavaScript. TypeScript был разработан, чтобы привнести объектно-ориентированные возможности вместе с поддержкой ES6.
Любой JavaScript это по сути TypeScript, а все TypeScript-коды компилируются в хороший, чистый JavaScript. С официально разрешенным ES6 (EcmaScript2015), TypeScript продолжает предлагать отличную совместимость и новые функции и, таким образом, TypeScript остается отличным языком для разработки JavaScript. Этот фантастический язык теперь имеет великого компаньона: Visual Studio Code - нового редактора кода от Microsoft, который, кстати, был создан с помощью TypeScript! Поэтому, вполне естественно, что они прекрасно работают друг с другом.
Установка Visual Studio Code
Скачайте Visual Studio Code с официального сайта и запустите процесс установки. После завершения инсталляции вы можете приступить к написанию скриптов.
Если раньше вы пользовались разными версиями TypeScript, убедитесь, что %PATH%
(системная переменная) обновлена и указывает на последнюю установленную версию. В противном случае некоторые вещи могут не работать.
Работа с TypeScript
Несмотря на то, JavaScript полностью поддерживается, потребуется кое-что сделать, чтобы добавить поддержку TypeScript в вашем проекте. Прежде всего, необходимо создать каталог, в котором будут храниться файлы проекта, например C:\projects\VSTest
. Создайте в этой папке файл tsconfig.json. Этот файл будет вашим файлом проекта TypeScript, и он содержит настройки проекта TypeScript, опции компилятора и т.д. Выберите Файл -> Новый файл и нажмите на Файл -> Сохранить или клавиши Ctrl+S
. Сохраните новый файл под именем tsconfig.json. Этот файл будет вашим файлом проекта TypeScript (что-то типа файла *.sln в C #), который содержит все настройки для компиляции и управления *.ts файлами. Подробнее о нем можно прочитать на официальном сайте, где имеется документация по tsconfig.json. Добавьте фигурные скобки {}
чтобы открыть IntelliSense. Как только вы начнете печатать, вам будет показан такой экран:
Стандартная конфигурация выглядит следующим образом:
{
"compilerOptions": {
"target": "ES5",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"out": "output/project.js",
"sourceMap": true
},
"files": [
]
}
Теперь, когда у нас есть файл проекта, мы можем начать создавать ts-файлы с кодом. Выберите в меню Файл -> Новый файл. Добавьте в него следующие строки и сохраните как hello-world.ts:
class Startup {
public static main():number{
console.log('Привет, мир!');
return 1;
}
}
Здесь ничего сложного: обычный класс, который выводит текст на консоль и возвращает целое число 1
.
Билдинг и компиляция
Для начала нажмите Ctrl+Shift+B
. Если это ваша первая попытка создания проекта, VS Code предложит вам создать Task Runner (Средство выполнения задач). Нажмите на Configure Task Runner (Настроить средство выполнения задач) для настройки конфигурационного файла.
Task Runner использует файл конфигурации, который дает VS Code указание использовать специальные исполнительные файлы с определенными параметрами. В нашем случае нам интересен TypeScript компилятор
После завершения процесса вы должны увидеть папку .vscode с файлом task.json.
Откройте файл task.json
для редактирования. Создайте конфигурацию для того, чтобы VS Code запустил tsc.exe с hello-world.ts
в качестве аргумента по аналогии с приведенным ниже примером:
{
"version": "0.1.0",
"command": "tsc",
"showOutput": "silent",
"args": ["hello-world.ts"],
"problemMatcher": "$tsc"
}
Хоть всё и выглядит нормально, давайте попробуем воспользоваться возможностями файла tsconfig.json чтобы поменять некоторые параметры билдинга. Вы можете изменить предыдущее задание, чтобы оно выглядело так:
{
"version": "0.1.0",
"command": "tsc",
"showOutput": "always",
"isShellCommand": true,
"args": [],
"problemMatcher": "$tsc"
}
Опишем кратко определение задания:
- version: версия таска
- command: какой исполнительный файл вызвать
- showOutput: [
silent
, always
, never
]
- isShellCommand: запускает команду
tsc
(VS Code напрямую исполняет ее)
- args : пустой, т.к. переписан
tsconfig.json
- problemMatcher: строка массива строк, основанная на предопределенных сопоставителях задач. Сейчас нет смысла это трогать
Информация об ошибках, возникающих в процессе разработки очень важна. Вот почему я всегда устанавливаю "showOuput": "always"
. Это изменяет поведение Окна Вывода, заставляя его всегда быть на виду в процессе разработки. Доступные значения определяют, как ведет себя окно вывода:
- silent: окно вывода появляется только в случае, если нет никаких ошибок в коде. Это значение по умолчанию
- always: окно вывода всегда на виду
- never: пользователь должен самостоятельно открывать окно вывода через меню «Вид», либо через сочетание клавиш
Ctrl+Shift+U
На данном этапе можно нажать Ctrl+Shift+B
чтобы начать разработку. Однако, хоть это и не выведет никаких сообщений об ошибках, никаких *.js
или sourcemap
файлов также не будет создано. Это потому, что мы не включили наш файл hello-world.ts
в настройках tsconfig.json>files[]
. Добавьте это, сохраните файл и начните заново.
Теперь в каталоге вашего проекта вы должны увидеть следующие файлы:
С добавлением новых файлов и ростом вашего проекта, обязательно убедитесь в том, что включили все *.ts
-файлы, которые хотите скомплировать, в tsconfig.json file
. Это поможет убедиться в том, что весь ваш код переводится в JavaScript и сливается в один файл, как в наших предыдущих настройках.
Ошибки при создании
Visual Studio Code отличная система предупреждения об ошибках. У вас появляется несколько вариантов отображения ошибок. Первый – через IntelliSense, как на картинке ниже:
Второй – маленький значок, говорящий о том, что что-то идет не так. Значок располагается в левом нижнем углу на панели задач:
Нажмите на иконку, и в верхней части окна перед вами выскочит окошко, показывающее номер строки и колонки, где находится ошибка, а также описание и тип ошибки, как на картинке ниже:
Резюме
Visual Studio Code отлично подходит при работе с TypeScript. В следующем посте Gulp и Visual Studio Code я расскажу как добавить Gulp к проекту для выполнения различных задач: компиляции ваших *.ts файлов, минимизации кода, компиляции LESS/SASS и т.д.