Встановлення TS, сервера і перший проєкт

PreviousОсобливості TypeScript NextПриклади string і number

Last updated 1 year ago

Встановлення TS, сервера і перший проєкт

Базові налаштування

Для роботи з TypeScript знадобляться такі інструменти:

Остання LTS-версія
Встановлений глобально . Його компілятор дозволить отримувати js-файл з ts-файлу

terminal

npm i -g typescript

Під час інсталяції на MacOS також потрібно ввести команду sudo. При введенні цієї команди термінал запитає логін та пароль користувача для встановлення пакета:

terminal

sudo npm install -g typescript

Якщо раніше вже було встановлено TS. У цьому випадку його можна оновити до останньої версії за допомогою команди

terminal

npm update -g typescript

Перевірити версію TS можна за допомогою команди

terminal

tsc -v

Технічна документація

Допоміжні розширення для Visual Studio Code:

Створення першого проєкту на TypeScript

Створюємо новий каталог для проєкту. Наприклад type-script-project.
У каталозі створимо index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="First TypeScript Project" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeScript</title>
</head>
<body>
  
  <script src="app.js"></script>
</body>
</html>

У цьому ж каталозі створимо файл app.ts і пропишемо код на TS

app.ts

function sayHello(name: string): void {
  console.log(`Hello, ${name}!`);
}

const personName: string = "Alex";
sayHello(personName);

Компілюють файл js командою tsc, передаючи після неї імʼя файлу TS.

terminal

tsc app.ts

Якщо додати ключ w (watch), то файл js буде перекомпільовуватися щоразу при зміні ts файлу: tsc -w app.ts

Після цього у теці скомпілюється файл app.js, який підключений в index.html

app.js

function sayHello(name) {
    console.log("Hello, ".concat(name, "!"));
}
var personName = "Alex";
sayHello(personName);

Можемо відкрити цей файл у Chrome і перевірити в консолі виконання скрипту.

Ініціалізація проєкту і підключення сервера

Ініціалізуємо проєкт з автозаповненням параметрів, пізніше самостійно руками будемо конфігурувати в package.json

terminal

npm init -y

terminal

npm i lite-server

Налаштуємо в package.json скрипт запуску сервера

"start": "lite-server"

Файл package.json повністю

package.json

{
  "name": "type-script-project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "keywords": [],
  "author": "Sasha Khomiak <khomiak@gmail.com>",
  "license": "ISC",
  "dependencies": {
    "lite-server": "^2.6.1"
  }
}

Тепер щоб запустити сервер використовуємо команду

terminal

npm start

Якщо синхронізуємо наш проєкт із GitHub, то не забуваємо додати ігнорування синхронізації нод-модулів

.gitignore

/node_modules

Покликання:

PreviousОсобливості TypeScript NextПриклади string і number

Last updated 1 year ago

Базові налаштування

Для роботи з TypeScript знадобляться такі інструменти:

Остання LTS-версія
Встановлений глобально . Його компілятор дозволить отримувати js-файл з ts-файлу

terminal

npm i -g typescript

terminal

sudo npm install -g typescript

terminal

npm update -g typescript

Перевірити версію TS можна за допомогою команди

terminal

tsc -v

Технічна документація

Допоміжні розширення для Visual Studio Code:

Створення першого проєкту на TypeScript

Створюємо новий каталог для проєкту. Наприклад type-script-project.
У каталозі створимо index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="First TypeScript Project" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeScript</title>
</head>
<body>
  
  <script src="app.js"></script>
</body>
</html>

У цьому ж каталозі створимо файл app.ts і пропишемо код на TS

app.ts

function sayHello(name: string): void {
  console.log(`Hello, ${name}!`);
}

const personName: string = "Alex";
sayHello(personName);

Компілюють файл js командою tsc, передаючи після неї імʼя файлу TS.

terminal

tsc app.ts

Якщо додати ключ w (watch), то файл js буде перекомпільовуватися щоразу при зміні ts файлу: tsc -w app.ts

Після цього у теці скомпілюється файл app.js, який підключений в index.html

app.js

function sayHello(name) {
    console.log("Hello, ".concat(name, "!"));
}
var personName = "Alex";
sayHello(personName);

Можемо відкрити цей файл у Chrome і перевірити в консолі виконання скрипту.

Ініціалізація проєкту і підключення сервера

Ініціалізуємо проєкт з автозаповненням параметрів, пізніше самостійно руками будемо конфігурувати в package.json

terminal

npm init -y

Встановимо

terminal

npm i lite-server

Налаштуємо в package.json скрипт запуску сервера

"start": "lite-server"

Файл package.json повністю

package.json

{
  "name": "type-script-project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "keywords": [],
  "author": "Sasha Khomiak <khomiak@gmail.com>",
  "license": "ISC",
  "dependencies": {
    "lite-server": "^2.6.1"
  }
}

Тепер щоб запустити сервер використовуємо команду

terminal

npm start

сервер запуститься за адресою:

Якщо синхронізуємо наш проєкт із GitHub, то не забуваємо додати ігнорування синхронізації нод-модулів

.gitignore

/node_modules

Покликання: