Як встановити TypeScript на Debian

TypeScript, потужний супернабір JavaScript, привносить статичну типізацію в динамічний світ веб-розробки. Це покращує супроводжуваність коду і забезпечує більш надійний досвід розробки. Для розробників, які працюють у Debian 12, інтеграція TypeScript може значно поліпшити ваш робочий процес. У цьому посібнику детально описано, як встановити TypeScript на Debian 12, що гарантує вам плавне та ефективне встановлення.

TypeScript додає статичну типізацію, класи та інтерфейси в JavaScript, що дає змогу використовувати найкращі інструменти в будь-якому масштабі. Він допомагає виявляти помилки на ранній стадії, покращує читабельність коду і полегшує спільну роботу в команді. Встановлення TypeScript у Debian 12 включає кілька ключових кроків. Вам потрібно переконатися, що Node.js і npm встановлено, потім установити компілятор TypeScript, сконфігурувати проект і перевірити встановлення.

Оновлення системи

Перш за все, необхідно оновити списки пакетів у системі. Оновлення гарантує наявність останніх версій пакетів і залежностей, запобігаючи можливим конфліктам у процесі встановлення. Відкрийте термінал і виконайте такі команди:

sudo apt update && sudo apt upgrade

Ці команди оновлять списки пакетів і оновлять усі застарілі пакети у вашій системі. Цей крок необхідний для підтримки безпеки та сумісності системи. Регулярні оновлення надають новітні функції та виправлення помилок, підвищуючи продуктивність і стабільність системи.

Встановлення Node.js

Далі встановіть Node.js за допомогою менеджера пакетів apt. Це найпростіший метод встановлення Node.js на Debian 12. Виконайте таку команду:

sudo apt install nodejs

Після встановлення переконайтеся, що Node.js був встановлений правильно, перевіривши його версію. Використовуйте наступну команду:

node -v

Ця команда відобразить встановлену версію Node.js. У разі успішного встановлення буде виведено номер версії, наприклад v16.16.0 або аналогічний. Якщо у вас виникли проблеми, переконайтеся, що вашу систему оновлено і що команда встановлення була введена правильно.

Встановлення npm

npm зазвичай постачається в комплекті з Node.js, але незайвим буде переконатися, що він встановлений і оновлений до останньої версії. Щоб встановити npm, виконайте таку команду:

sudo apt install npm

Після встановлення npm оновіть його до останньої версії за допомогою наступної команди:

sudo npm install npm@latest -g

Прапор -g гарантує, що npm буде встановлено глобально, що зробить його доступним з будь-якої директорії у вашій системі. Переконайтеся в установці npm, перевіривши його версію:

npm -v

У разі успішного встановлення буде виведено номер версії npm. Оновлення npm гарантує, що ви матимете доступ до останніх функцій і виправлень безпеки.

Встановлення TypeScript

Встановивши Node.js і npm, ви можете приступити до встановлення TypeScript. TypeScript встановлюється глобально за допомогою npm, що дає змогу вам використовувати компілятор TypeScript (tsc) з будь-якої точки вашої системи.

Встановлення компілятора TypeScript

Щоб встановити компілятор TypeScript глобально, виконайте таку команду:

sudo npm install -g typescript

Прапор -g вказує на глобальну установку, роблячи команду tsc доступною для всієї системи. Це дасть вам змогу компілювати файли TypeScript з будь-якої директорії без необхідності локального встановлення в кожному проєкті.

Перевірка встановлення TypeScript

Після встановлення переконайтеся, що TypeScript був встановлений правильно, перевіривши його версію. Відкрийте термінал і виконайте команду:

tsc --version

Ця команда має вивести встановлену версію компілятора TypeScript. Якщо TypeScript встановлено правильно, ви побачите номер версії, наприклад Version 4.9.4. Якщо ви зіткнулися з помилкою «команда не знайдена», зверніться до розділу з усунення неполадок далі в цьому посібнику.

Створення проекту TypeScript

Тепер, коли TypeScript встановлено, давайте створимо базовий проект TypeScript, щоб переконатися, що все працює як треба. Це включає в себе створення каталогу проекту, ініціалізацію проекту TypeScript, створення файлу TypeScript і його компіляцію.

Створення нового каталогу проекту

Спочатку створіть новий каталог для проекту TypeScript. Організація проєктів в окремі каталоги допоможе зберегти робочий простір чистим і керованим. Використовуйте такі команди:

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

Ці команди створюють каталог з іменем my-typescript-project і здійснюють перехід до нього. У цій директорії зберігатимуться всі файли, пов’язані з вашим проєктом TypeScript.

Ініціалізація проєкту TypeScript

Далі ініціалізуйте проєкт TypeScript, створивши файл tsconfig.json. Цей файл визначає параметри компілятора та налаштування проекту для вашого TypeScript-проекту. Щоб створити файл tsconfig.json за замовчуванням, виконайте команду:

tsc --init

Ця команда генерує файл tsconfig.json з налаштуваннями за замовчуванням. Ви можете налаштувати цей файл відповідно до конкретних вимог вашого проєкту. Файл tsconfig.json вказує компілятору TypeScript, як компілювати ваш код.

Створення файлу TypeScript

Створіть простий файл TypeScript, наприклад app.ts, у каталозі проекту. Файли TypeScript мають розширення .ts. За допомогою текстового редактора створіть новий файл з іменем app.ts і додайте до нього такий код:

console.log(«Hello, World!»);

Це базова програма «Hello, World!» мовою TypeScript. Збережіть файл у каталозі проєкту.

Компіляція файлу TypeScript

Код TypeScript має бути скомпільований у JavaScript, перш ніж він зможе бути виконаний Node.js або веб-браузером. Щоб скомпілювати файл app.ts, виконайте команду:

tsc app.ts

Ця команда компілює файл app.ts і генерує відповідний файл JavaScript з іменем app.js. Якщо компіляція пройшла успішно, у терміналі не буде відображено жодних помилок.

Запуск програми TypeScript

Скомпілювавши файл TypeScript у JavaScript, ви можете запустити додаток за допомогою Node.js. Цей крок перевіряє, що TypeScript правильно встановлений і налаштований, і що ваш код може бути виконаний.

Запуск файлу JavaScript

Щоб запустити скомпільований файл JavaScript, виконайте таку команду:

node app.js

Ця команда виконує файл app.js за допомогою Node.js. Якщо все налаштовано правильно, ви побачите, як у консоль виводиться повідомлення «Hello, World!».

Розуміння виведення

Поява повідомлення «Hello, World!» підтверджує, що TypeScript встановлено та налаштовано правильно. Це вказує на те, що компілятор TypeScript працює, і Node.js може виконувати скомпільований JavaScript-код. Якщо ви не бачите цього виводу, перевірте кроки з встановлення та переконайтеся, що у вашому коді немає помилок.

Конфігурування TypeScript

Файл tsconfig.json є центральним для конфігурування проектів TypeScript. У ньому вказуються параметри компілятора, включення і виключення файлів. Розуміння та налаштування цього файлу є дуже важливими для керування складними проектами TypeScript.

Розуміння параметрів tsconfig.json

Файл tsconfig.json містить різні опції компілятора, які керують тим, як код TypeScript компілюється в JavaScript. Ось деякі загальні параметри:

• target: Вказує цільову версію ECMAScript (наприклад, ES5, ES6, ES2020).
• module (модуль): Вказує генерацію коду модуля (наприклад, CommonJS, ESNext).
• outDir: Вказує вихідний каталог для скомпільованих JavaScript-файлів.
• rootDir: Вказує кореневий каталог проекту TypeScript.
• sourceMap: Генерує відповідні файли .map для налагодження.
• strict: Включає всі опції суворої перевірки типів.
• esModuleInterop: Забезпечує взаємодію між модулями CommonJS і ES.

Змініть ці опції відповідно до вимог вашого проекту. Наприклад, встановлення цільового значення ES6 забезпечує сумісність скомпільованого JavaScript-коду із сучасними браузерами.

Приклад конфігурації

Ось приклад файлу tsconfig.json із загальними налаштуваннями:

  {
  "compilerOptions": {
  "target": "ES6",
  "module": "CommonJS",
  "outDir": "./dist",
  "rootDir": "./src",
  "sourceMap": true,
  "strict": true,
  "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
  }

У цій конфігурації:

• target встановлено на ES6, що забезпечує сумісність із сучасними движками JavaScript.
• module встановлено на CommonJS, широко використовувану систему модулів для Node.js.
• outDir має значення ./dist, що означає, що скомпільовані файли JavaScript будуть поміщені в каталог dist.
• rootDir має значення ./src, що означає, що вихідні файли TypeScript будуть розміщені в каталозі src.
• include вказує, що всі файли в каталозі src мають бути включені в компіляцію.
• exclude вказує, що каталог node_modules має бути виключений із компіляції.

Використання TypeScript у редакторі коду

Інтеграція TypeScript з редактором коду підвищує зручність розробки. Такі редактори коду, як VS Code, Sublime Text і Atom, пропонують плагіни і вбудовану підтримку TypeScript, надаючи такі можливості, як IntelliSense, налагодження і навігація по коду.

VS Code

VS Code має вбудовану підтримку TypeScript, що робить його чудовим вибором для розробки на TypeScript. Він надає такі можливості, як:

• IntelliSense: Інтелектуальне завершення коду та пропозиції.
• Налагодження: Дозволяє налагоджувати код TypeScript безпосередньо в редакторі.
• Навігація по коду: Надає інструменти для навігації кодовою базою, такі як «Перейти до визначення» і «Знайти всі посилання».

Щоб поліпшити розробку TypeScript у VS Code, встановіть такі розширення, як TSLint або ESLint для лінтингу та форматування коду.

Інші редактори

Інші популярні редактори коду, такі як Sublime Text і Atom, також пропонують плагіни TypeScript. Для Sublime Text ви можете використовувати плагін TypeScript, а для Atom – пакет atom-typescript. Ці плагіни надають схожі з VS Code функції, такі як завершення коду і перевірка помилок.

Щоб налаштувати ці редактори для розробки на TypeScript, встановіть необхідні плагіни та налаштуйте їх відповідно до документації. Більшість плагінів вимагають вказати розташування файлу tsconfig.json.

Розширене встановлення TypeScript

Хоча стандартний метод інсталяції підходить для більшості випадків, існують альтернативні підходи та сценарії, які слід розглянути для складніших інсталяцій. До них належать використання диспетчера версій вузла (NVM) і розуміння наслідків глобального та локального встановлення.

Використання NVM (Node Version Manager)

NVM дає змогу керувати кількома версіями Node.js в одній системі. Це корисно, якщо вам потрібно працювати над проектами, для яких потрібні різні версії Node.js. Щоб встановити NVM, дотримуйтесь інструкцій у репозиторії NVM на GitHub. Після встановлення NVM ви можете встановити Node.js за допомогою такої команди:

nvm install node

Ця команда встановлює останню версію Node.js. Ви також можете встановити певні версії за допомогою команди:

nvm install 16.16.0

Після встановлення Node.js ви можете перемикатися між версіями за допомогою команди:

nvm use 16.16.0

NVM спрощує управління версіями Node.js, запобігаючи конфліктам і забезпечуючи сумісність між різними проектами.

Глобальне та локальне встановлення

TypeScript може бути встановлений глобально або локально в рамках проєкту. При глобальному встановленні команда tsc доступна в усій системі, а при локальному – тільки в каталозі проєкту.

Глобальна інсталяція зручна для загального використання, але локальна інсталяція краща під час роботи над проєктами, що вимагають певних версій TypeScript. Щоб встановити TypeScript локально, перейдіть у каталог проєкту і виконайте команду:

npm install typescript --save-dev

Прапор –save-dev додає TypeScript як залежність від розробки у файл package.json. Щоб використовувати локально встановлений компілятор TypeScript, ви можете або додати його в PATH, або використовувати npx:

npx tsc --version

Це гарантує, що в проєкті буде використовуватися зазначена версія TypeScript, що дасть змогу уникнути проблем із сумісністю.

Усунення загальних проблем

Під час встановлення та використання TypeScript ви можете зіткнутися з деякими загальними проблемами. У цьому розділі наведено поради щодо усунення неполадок, які допоможуть вам вирішити ці проблеми.

Помилки «Команду не знайдено»

Якщо під час запуску tsc ви зіткнулися з помилкою «command not found», це, як правило, означає, що компілятор TypeScript відсутній у PATH вашої системи. Щоб вирішити цю проблему, переконайтеся, що глобальна директорія bin від npm знаходиться у вашому PATH. Ви можете знайти цю директорію, виконавши команду:

npm config get prefix

У результаті ви отримаєте каталог префікса. Додайте /usr/local/bin до змінної оточення PATH. Це можна зробити, додавши такий рядок у файл ~/.bashrc або ~/.zshrc:

export PATH=«$PATH:/usr/local/bin».

Після додавання цього рядка перезавантажте конфігурацію оболонки, виконавши команду:

source ~/.bashrc

Тепер спробуйте знову виконати команду tsc –version. Помилка має бути усунена.

Помилки компіляції

Помилки компіляції зазвичай вказують на синтаксичні помилки або помилки типів у вашому коді TypeScript. Уважно прочитайте повідомлення про помилки та зверніться до документації з TypeScript. До поширених помилок належать:

• Невідповідність типів: Переконайтеся, що змінні та параметри функцій мають правильні типи.
• Синтаксичні помилки: Перевірте наявність помилок і неправильного синтаксису.
• Відсутні модулі: Переконайтеся, що всі необхідні модулі встановлені за допомогою npm.

Використовуйте редактор коду з підтримкою TypeScript, щоб виявити ці помилки на ранній стадії. VS Code, Sublime Text і Atom дають змогу перевіряти помилки в реальному часі та робити пропозиції.

Конфлікти версій

Конфлікти версій можуть виникати, коли для різних проєктів потрібні різні версії TypeScript. Використання NVM або локальних установок може допомогти впоратися з цими конфліктами. Наприклад, ви можете встановити TypeScript локально в кожному проєкті та використовувати npx tsc, щоб переконатися, що використовується правильна версія.

Крім того, оновлюйте глобальну версію TypeScript до останньої стабільної версії, щоб скористатися новими можливостями та виправленнями помилок.

Вітаємо! Ви успішно встановили TypeScript. Для отримання додаткової допомоги або корисної інформації ми рекомендуємо вам відвідати офіційний  сайт TypeScript.