webJdev

Короткий вступ TypeScript додає статичну типізацію поверх JavaScript і підтримує класичні концепти ООП: класи , успадкування , інтерфейси , інкапсуляцію , поліморфізм та абстракції . Нижче — практичні приклади та пояснення. Класи — декларація, конструктор, властивості та методи class Person { public name: string; private age: number; protected email?: string; // необов’язкове static species = 'Homo sapiens'; constructor(name: string, age: number, email?: string) { this.name = name; this.age = age; this.email = email; } public greet(): string { return `Hi, I'm ${this.name}.`; } private getBirthYear(currentYear: number): number { return currentYear - this.age; } } const p = new Person('Ivan', 30, 'ivan@example.com'); console.log(p.greet()); // console.log(p.age); // помилка: 'age' приватне console.log(Person.species); Успадкування і перевизначення (extends, super) class Employee extends Person { ...

Крок 1. Ініціалізація проєкту Спочатку створимо нову теку та ініціалізуємо Node.js-проєкт за допомогою npm : mkdir my-typescript-app cd my-typescript-app npm init -y Крок 2. Встановлення TypeScript Додаємо TypeScript як dev-залежність: npm install --save-dev typescript ts-node @types/node - typescript — компілятор TypeScript - ts-node — дозволяє запускати TS-файли без попередньої компіляції - @types/node — типи для стандартних Node.js API Крок 3. Створення файлу tsconfig.json Ініціалізуємо конфігурацію TypeScript: npx tsc --init Приклад файлу tsconfig.json { "compilerOptions": { "target": "ES2020", // Версія JS у вихідному коді "module": "CommonJS", // Система модулів (для Node.js) "rootDir": "src", // Вхідна папка з TypeScript-кодом "outDir": "dist", // Куди компілюється код JS "str...

Що таке Next.js? Next.js — це прогресивний фреймворк для розробки веб-застосунків на основі React. Він розширює можливості React, додаючи готову інфраструктуру для Server-Side Rendering (SSR), генерації статичних сторінок, маршрутизації через файлову систему, а також можливість створювати backend-ендпоінти прямо в проєкті. Чому він став популярним? Next.js швидко здобув популярність завдяки тому, що пропонує: SEO-дружні сторінки завдяки SSR / SSG; швидкий перший рендер (First Page Load); просту маршрутизацію без налаштування; розгортання в один клік через Vercel; вбудовану оптимізацію зображень та продуктивності. Чим відрізняється від класичного React У класичному React ми отримуємо лише клієнтську бібліотеку для побудови UI-компонентів. Усе інше (SSR, маршрути, API) треба налаштовувати вручну або через сторонні бібліотеки (наприклад, React Router, Redux, Express, etc.). Next.js — це уже повноцінний фреймворк. Він одразу має: серверний рендеринг...

Що таке npm? npm (Node Package Manager) — це офіційний пакетний менеджер для Node.js . Він дозволяє: Встановлювати сторонні бібліотеки та фреймворки Керувати залежностями проєкту Запускати скрипти (команди) через package.json Приклад ініціалізації проєкту з npm npm init -y Файл package.json (скорочений приклад) { "name": "my-project", "version": "1.0.0", "scripts": { "start": "ts-node src/index.ts", "build": "tsc" }, "dependencies": { "express": "^4.18.0" }, "devDependencies": { "typescript": "^5.0.0", "ts-node": "^10.0.0" } } Що таке tsconfig.json? tsconfig.json — це файл конфігурації для компілятора TypeScript, який визначає, як слід компілювати код. Приклад файлу tsconfig.json { "compilerOptions": { "target": "ES2020...

Що таке Node.js? Node.js — це середовище виконання JavaScript поза браузером, побудоване на рушії Google V8 . Воно дозволяє запускати JavaScript на сервері, створюючи серверні застосунки з високою продуктивністю. Основні характеристики: Однопотокова модель з неблокуючим I/O Асинхронне виконання за допомогою event loop Висока продуктивність у роботі з мережевими запитами npm — найбільший реєстр пакетів Що таке event loop? Event loop — це механізм в Node.js, який дозволяє неблокуючим асинхронним операціям виконуватись у середовищі з єдиним потоком. Він постійно перевіряє наявність подій у черзі та викликає відповідні колбеки. Як працює однопоточність у Node.js? Node.js використовує один потік (main thread) для обробки JavaScript-коду. Операції, які займають час (мережеві запити, читання з файлової системи), делегуються до системних API або thread pool, і після завершення результат повертається у основний потік через event loop. Приклад: асинхронна о...

Angular-проєкт можна створити командою : ng new project-name Основні параметри цієї команди наведені в таблиці. Аргумент Опис --directory Ця опція використовується для вказання назви директорії проєкту. За замовчуванням збігається з назвою проєкту. --force Якщо значення true , ця опція перезаписує всі наявні файли. --minimal Ця опція створює проєкт без додавання підтримки фреймворків для тестування. --package-manager Ця опція використовується для вказання менеджера пакетів, який буде використовуватися для завантаження та встановлення потрібних пакетів Angular. Якщо не вказано, буде використано NPM. Інші варіанти: yarn, pnpm, cnpm. Стандартний менеджер підходить для більшості проєктів. --prefix Ця опція додає префікс до всіх селекторів компонентів. --routing Ця опція використовується для створення модуля маршрутизації у проєкті. --skip-git Вико...

Створення регулярних виразів Регулярні вирази в JavaScript можна створити одним із наступних способів: let reg1 = new RegExp("abc"); let reg2 = /abc/; Основні можливості та метод test() Метод test() дозволяє перевірити, чи відповідає наступний текст регялрному виразу. console.log(reg1.test("abcd")); //true console.log(reg2.test("abbcd")); //false Регуоярний вираз для перевірки наявності цифр в рядку: console.log(/[0-9]/.test("year 2025")); //true console.log(/[0-9]/.test("this year")); //false Часто використовуються наступні позначення: \d - будь-яка цифра \w - алфавітно-цифровий символ \s - пробільний символ (пробіл, табуляція, новий рядок) \D - не цифра \W - не алфавітно-цифровий символ \S - не пробільний символ . - будь-який символ окрім переведення рядка Для інверсії можна використати символ ^ . Наприклад: let notBinary = /[^01]/; console.log(notBinary.test("1040011210101110")); //tru...

Для роботи з багатьма фронт-енд фреймворками має бути встановлений Node.js та менеджер пакетів npm. Node.js — це кросплатформне середовище виконання JavaScript із відкритим вихідним кодом, яке виконує JS-код за межами веб-браузера. Node.js дозволяє розробникам використовувати JavaScript для написання інструментів командного рядка та для сценаріїв на стороні сервера — запуск сценаріїв на стороні сервера для створення динамічного вмісту веб-сторінки, перш ніж сторінка буде відправлена у веб-браузер користувача. npm (Node Package Manager) — менеджер пакетів за замовчуванням для Node.js. Він складається з клієнта командного рядка, який також називається npm, і онлайнової бази даних загальнодоступних і платних приватних пакетів. npm включає також npx (Node Package Execute) . npx дозволяє просто виконувати встановлені пакети. На сайті https://nodejs.org/uk/download/ потрібно завантажити одну із останніх версій. Як правило, пропонується інсталяція двох версій: останньої та LST. Для ко...

1. Number Використовується для роботи з числами, як цілими, так і дробовими. 64-бітне число, з яких 52 біти відводиться на значення, 11 біти – на показник степеню 1 біт – на знак (+ чи -) Числа з плаваючою крапкою можуть приймати значення в діапазоні від 2^-1074 до 2^1024 (по модулю) Цілі числа можу змінюватися в діапазоні від -(2^53 − 1) to 2^53 – 1. Також є спеціальні значення +Infinity (Number.POSITIVE_INFINITY) та-Infinity (Number.NEGATIVE_INFINITY), Number.MAX_VALUE, Number.MIN_VALUE, Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER, Number.NaN. 2. BigInt Дозволяє працювати з цілими числами довільної довжини. 3. Boolean Можливі значення true та false. 4. String Рядковий тип 5. Symbol Унікальний рядковий ідентифікатор. 6. Null Має одне значення: null. 7. Undefined Має одне значення: undefined

Мова JavaScript, на відміну від Java, використовує неявну динамічну типізацію. Це може спричинити ряд проблем, які важко відстежити. Розглянемо такий приклад: var first="100"; var second="25"; var result=first-second; console.log(result); Хоча змінні first та second є текстовими, при застосування оператора віднімання вони автоматично конветуються в числовий тип (Number) і результат виконання цього коду буде очікуваним: 75. Але подивимось на такий приклад: var first="100"; var second="25"; if(first>second){ console.log("100 більше за 25"); }else{ console.log("25 більше за 100"); } Тут результат буде неочікуваний: 25 більше за 100. Чому так? Змінні first та second є текстовими. При застосування оператора порівняння "більше" вони не конвертуються в числовий тип, а порівнюються як текст. Тобто використовуються лексикографічний порядок або, простішими словами, значення порівнюється "по алфавіту...