Налаштування TypeScript із кодом Visual Studio

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

Встановлення Visual Studio Code

Якщо ви ще не встановили 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.