Как скомпилировать TypeScript через Visual Studio Code?

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

Шаг 1: Установка Node.js и TypeScript

Перед тем как начать, убедитесь, что у вас установлен Node.js, так как он необходим для работы с TypeScript и npm (Node Package Manager). Вы можете скачать Node.js с официального сайта.

После установки Node.js откройте терминал и выполните команду для установки TypeScript глобально:

npm install -g typescript

Шаг 2: Настройка проекта

npm init -y

tsc --init

Пример содержимого tsconfig.json:

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

Шаг 3: Написание TypeScript-кода

Создайте папку src и добавьте туда файл index.ts:

// src/index.ts
const greeting: string = "Привет, мир!";
console.log(greeting);

Шаг 4: Компиляция TypeScript в JavaScript

Чтобы скомпилировать ваш TypeScript-код, вы можете использовать следующие команды:

tsc src/index.ts

Эта команда создаст файл index.js в той же папке.

tsc

Если у вас правильно настроен tsconfig.json, все файлы TypeScript в папке src будут скомпилированы, и соответствующие файлы JavaScript появятся в папке dist.

Шаг 5: Запуск JavaScript-кода

Теперь вы можете запустить скомпилированный JavaScript-код с помощью Node.js:

node dist/index.js

Вы должны увидеть вывод:

Привет, мир!

Заключение

Теперь вы знаете, как скомпилировать TypeScript через Visual Studio Code. Используйте эту информацию для создания более сложных приложений, изучения дополнительных возможностей TypeScript и улучшения ваших навыков фронтенд-разработки.