Настройка TypeScript с помощью Visual Studio Code

Visual Studio Code (VSCode) — это мощный и популярный редактор кода, который обеспечивает отличную поддержку разработки TypeScript. Это руководство проведет вас через шаги по настройке TypeScript в VSCode, гарантируя, что у вас будет все необходимое для эффективного начала кодирования.

Установка кода Visual Studio

Если вы еще не установили Visual Studio Code, выполните следующие действия:

1. Перейдите на официальный сайт VSCode.
2. Загрузите установщик для вашей операционной системы.
3. Запустите установщик и следуйте инструкциям на экране для завершения установки.

Установка Node.js и npm

TypeScript управляется через npm (Node Package Manager), для которого требуется Node.js. Чтобы установить Node.js и npm:

1. Посетите официальный сайт Node.js.
2. Загрузите и установите LTS-версию Node.js, которая включает npm.
3. Проверьте установку, открыв терминал и запустив node -v и npm -v, чтобы проверить версии Node.js и npm.

Установка TypeScript

С установленными Node.js и npm вы теперь можете установить TypeScript глобально. Откройте терминал и выполните следующую команду:

npm install -g typescript

Эта команда устанавливает TypeScript глобально, позволяя использовать команду tsc для компиляции файлов TypeScript из любой точки вашей системы.

Настройка проекта TypeScript

Чтобы начать новый проект TypeScript, выполните следующие действия:

1. Создайте новый каталог для вашего проекта и перейдите в него:

mkdir my-typescript-project
cd my-typescript-project

1. Инициализируйте новый проект npm:

npm init -y

1. Установите TypeScript как зависимость разработки:

npm install --save-dev typescript

1. Создайте файл конфигурации TypeScript:

npx tsc --init

Эта команда создает файл tsconfig.json в каталоге вашего проекта, который содержит параметры конфигурации для компилятора TypeScript.

Настройка VSCode для TypeScript

VSCode поставляется со встроенной поддержкой TypeScript, но вы можете еще больше расширить возможности разработки, настроив редактор:

Открытие вашего проекта

Откройте проект TypeScript в VSCode:

1. Запустите VSCode.
2. Выберите Файл > Открыть папку... и выберите каталог вашего проекта.

Установка расширений TypeScript

Хотя VSCode обеспечивает отличную поддержку TypeScript «из коробки», вы можете установить дополнительные расширения для улучшения функциональности:

• Расширение TypeScript: Обеспечивает поддержку языка TypeScript и такие функции, как IntelliSense, навигация по коду и многое другое.
• Prettier: Расширение для форматирования кода, обеспечивающее единообразный стиль кода.

Настройка компилятора TypeScript

Откройте файл tsconfig.json для настройки параметров компилятора TypeScript. Вот пример конфигурации:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Эта конфигурация устанавливает целевую версию ECMAScript на ES6, указывает формат модуля CommonJS, включает строгую проверку типов и устанавливает выходной каталог на ./dist. Она также включает исходные карты для упрощения отладки.

Написание и запуск кода TypeScript

Создайте новый файл TypeScript в каталоге src:

mkdir src
touch src/index.ts

Добавьте код TypeScript в index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

Чтобы скомпилировать код TypeScript, выполните:

npx tsc

Эта команда компилирует ваши файлы TypeScript и выводит файлы JavaScript в каталог dist.

Чтобы запустить скомпилированный код JavaScript, используйте:

node dist/index.js

Заключение

Настройка TypeScript с Visual Studio Code — это простой процесс, который включает установку необходимых инструментов, настройку проекта и использование мощных функций VSCode. Следуя этому руководству, вы получите полностью функциональную среду разработки TypeScript и будете готовы создавать надежные приложения с помощью TypeScript.