TypeScript – это надмножество JavaScript, которое добавляет статическую типизацию и современные возможности, востребованные в крупных проектах. Чтобы начать использовать его в Visual Studio Code, необходимо установить как сам компилятор TypeScript, так и расширение, обеспечивающее поддержку в редакторе.
Первым шагом потребуется Node.js, так как TypeScript распространяется через npm. Скачайте и установите актуальную версию Node.js с официального сайта. После установки убедитесь, что команды node -v и npm -v работают в терминале.
Далее установите TypeScript глобально, выполнив команду npm install -g typescript. Это позволит использовать компилятор tsc в любом проекте. Проверьте установку через tsc -v – вы должны увидеть версию компилятора.
В Visual Studio Code перейдите в раздел Extensions и найдите расширение TypeScript Hero или используйте встроенную поддержку, которая уже включает средства работы с .ts-файлами. Убедитесь, что файл tsconfig.json присутствует в корне проекта – он задаёт конфигурацию компиляции. Создать его можно командой tsc —init.
Теперь вы можете писать код на TypeScript, использовать автодополнение, навигацию по типам и моментальную проверку кода прямо в редакторе. Чтобы скомпилировать проект, выполните tsc в терминале – все .ts-файлы будут преобразованы в .js согласно настройкам из tsconfig.json.
Проверка наличия установленного Node.js и npm
Откройте терминал в Visual Studio Code. Введите команду:
node -vЕсли установлен Node.js, отобразится его версия, например:
v18.17.1Аналогично проверьте npm:
npm -v9.6.7Если команды не распознаются, Node.js не установлен. В этом случае:
- Перейдите на https://nodejs.org
- Скачайте LTS-версию для вашей операционной системы
- Установите с параметрами по умолчанию
После установки перезапустите Visual Studio Code и снова выполните команды node -v и npm -v для проверки. Отсутствие ошибок подтверждает готовность среды к работе с TypeScript.
Установка TypeScript через npm
Откройте терминал в Visual Studio Code и убедитесь, что установлен Node.js, выполнив команду node -v. При отсутствии установленной версии скачайте Node.js с официального сайта и установите его.
Для локальной установки в рамках проекта создайте файл package.json через npm init -y, затем выполните npm install --save-dev typescript. Это добавит TypeScript в раздел devDependencies, обеспечивая контроль версий внутри проекта.
После установки создайте файл конфигурации компилятора: npx tsc --init. Он сгенерирует tsconfig.json, где настраиваются параметры компиляции. Обязательно проверьте поля target, module и outDir для соответствия требованиям проекта.
Для компиляции файлов используйте npx tsc. Для автоматической перекомпиляции при изменении кода запустите npx tsc --watch.
Проверка версии установленного TypeScript
Откройте терминал в Visual Studio Code с помощью сочетания клавиш Ctrl + ` или через меню Terminal → New Terminal.
Введите команду tsc -v и нажмите Enter. В ответ будет выведена строка вида Version 5.3.2, где 5.3.2 – установленная версия TypeScript.
Если вместо номера версии появляется сообщение об ошибке или команда не распознаётся, это означает, что TypeScript не установлен глобально. Установите его через npm: npm install -g typescript, затем повторите проверку.
Для проверки локальной версии, установленной в конкретном проекте, используйте команду npx tsc -v. Это важно, если проект использует отличную от глобальной версию компилятора.
Убедитесь, что локальный файл node_modules/typescript/package.json содержит актуальную версию. Для быстрого просмотра выполните: npm list typescript.
Создание конфигурационного файла tsconfig.json
Файл tsconfig.json определяет параметры компиляции TypeScript и структуру проекта. Чтобы создать его, в корневой директории проекта выполните команду:
npx tsc —init
После выполнения команды будет сгенерирован файл с базовой конфигурацией. Для типичного проекта рекомендуется задать следующие параметры:
«target»: «ES6» – указывает, в какой версии JavaScript будет скомпилирован код. ES6 обеспечивает хорошую поддержку современных конструкций.
«module»: «commonjs» – используется при разработке под Node.js. Для фронтенда возможно значение «ESNext» или «ES6».
«strict»: true – включает строгую типизацию. Это помогает выявлять ошибки на этапе компиляции.
«outDir»: «./dist» – определяет каталог для скомпилированных файлов. Рекомендуется отделять исходный код от результирующего.
«rootDir»: «./src» – указывает, где находятся исходники TypeScript. Это помогает поддерживать структуру проекта.
«esModuleInterop»: true – позволяет корректно импортировать модули, написанные в стиле CommonJS.
После изменения файла сохраните его и запустите компилятор командой npx tsc. Убедитесь, что структура папок src и dist соответствует указанной в конфигурации. Это обеспечит корректную работу сборки и автодополнения в Visual Studio Code.
Настройка Visual Studio Code для работы с TypeScript
Откройте Visual Studio Code и установите расширение TypeScript Hero или TypeScript Toolbox из вкладки Extensions (Ctrl+Shift+X) для автодополнения, навигации и импорта модулей.
Убедитесь, что установлен Node.js, так как он содержит менеджер пакетов npm. Выполните в терминале команду npm install -g typescript, чтобы глобально установить компилятор tsc.
Создайте файл tsconfig.json в корне проекта с помощью команды tsc —init. Включите ключевые опции: «target»: «es6», «module»: «commonjs», «strict»: true, «outDir»: «./dist», «rootDir»: «./src».
Настройте VS Code на автоматическую компиляцию. Откройте tasks.json в папке .vscode и добавьте задачу с командой tsc -w для наблюдения за изменениями в файлах.
Включите IntelliSense: убедитесь, что в настройках пользователя включена опция «typescript.tsserver.useSeparateSyntaxServer»: false для улучшенной производительности и поддержки JS/TS в одном проекте.
Для запуска с отладкой создайте launch.json в .vscode с конфигурацией, указывающей путь к собранному JavaScript в dist и точкой входа. Пример: «program»: «${workspaceFolder}/dist/index.js».
Активируйте форматирование по сохранению: «editor.formatOnSave»: true. Установите Prettier или ESLint для автоматического форматирования и проверки кода.
Компиляция TypeScript-файлов в Visual Studio Code
Для компиляции TypeScript-файлов необходим установленный пакет TypeScript. Убедитесь, что он установлен глобально через команду npm install -g typescript.
Создайте файл tsconfig.json в корне проекта с помощью команды npx tsc —init. Это создаст конфигурацию компилятора, где можно задать параметры, например: «target»: «ES6», «outDir»: «./dist», «rootDir»: «./src».
Сохраните исходные файлы с расширением .ts в указанной директории rootDir. Для запуска компиляции используйте терминал Visual Studio Code: команда npx tsc выполнит сборку всех файлов, указанных в tsconfig.json.
Чтобы компиляция происходила автоматически при изменении файлов, используйте режим слежения: npx tsc —watch. Это полезно для разработки без постоянного ручного запуска компилятора.
При наличии ошибок в коде они отображаются прямо в редакторе благодаря интеграции с TypeScript-сервером. Для точной навигации по ошибкам используйте сочетание клавиш Ctrl+Shift+M для открытия панели «Проблемы».
Если используется сборщик (например, Webpack), отключите опцию «noEmit»: true и настройте внешний процесс компиляции. В противном случае Visual Studio Code полагается на tsc и настройки tsconfig.json.
Обработка ошибок компиляции и запуск готового JavaScript
После сохранения файла с расширением .ts, компилятор TypeScript автоматически проверяет код на наличие ошибок. Если включён флаг "noEmitOnError": true в tsconfig.json, при наличии ошибок JavaScript-файл не будет создан.
Для получения точной информации об ошибках используйте терминал VS Code:
tsc
src/index.ts(5,12): error TS2339: Property 'lengthh' does not exist on type 'string'.
Для изоляции проблем можно использовать ключ --noEmit:
tsc --noEmit
Он предотвратит генерацию JS, сосредоточив внимание на диагностике.
После устранения всех ошибок и успешной компиляции, запускайте JavaScript-файл напрямую через Node.js:
node dist/index.js
Если компиляция производится в режиме watch, используйте:
tsc --watch
Каждое сохранение перезапустит проверку и пересборку.
Для локализации ошибок в больших проектах удобно включить sourceMap в tsconfig.json, что позволит отлаживать исходный TypeScript в DevTools браузера.
Загрузка...
