Вступ до TypeScript та Перетворення Типів
JavaScript був створений для невеликих фрагментів коду, що вбудовувалися у веб-сторінки. Навряд чи хтось міг передбачити його шалену популярність та використання для створення великих програм із тисячами рядків коду.
Попри еволюцію JavaScript у потужний інструмент для розробки програм, він не є ідеальною мовою. Його початкове призначення та скромний старт призвели до наявності деяких особливостей, які можуть ускладнити розробку масштабних проєктів.
Наприклад, JavaScript не завжди видає помилки при зверненні до неіснуючих елементів об’єкта або при множенні null на число.
У JavaScript порожній рядок (“”) при порівнянні з оператором рівності (==) вважається рівним 0 (нулю). Ще гірше, що ці помилки можуть залишатися непоміченими під час розробки. Виявити їх можна тільки після виконання програми.
TypeScript, розроблений на основі JavaScript, покликаний вирішити проблеми, що виникають під час створення програм на JavaScript. Він робить це за допомогою статичної перевірки типів під час написання коду.
Статична перевірка дозволяє виявляти помилки в коді без необхідності його виконання. Статична перевірка типів контролює відповідність типів даних під час розробки, запобігаючи помилкам, пов’язаним з типами.
TypeScript є типізованим надмножиною JavaScript. Це означає, що будь-який коректний код JavaScript є також коректним кодом TypeScript. Типізація в TypeScript додає правила для використання різних типів даних, роблячи його строго типізованою мовою, де неможливо обійти обмеження, що накладаються системою типів.
TypeScript є важливим етапом у розвитку веб-розробки. Він дозволяє писати більш читабельний код, який легше підтримувати. TypeScript також сприяє дотриманню правил кодування та допомагає розробникам знаходити та уникати помилок ще на етапі написання коду.
TypeScript є більш надійним і легким у рефакторингу, що робить його ідеальним для розробки масштабних застосунків. Оскільки TypeScript є строго типізованим, розглянемо перетворення типів, його важливість та особливості його обробки в TypeScript.
Перетворення Типів у TypeScript: Значення та Методи
Перетворення типу – це процес зміни значення з одного типу даних на інший, наприклад, перетворення рядка на число. Перетворення може бути неявним, коли компілятор автоматично змінює сумісні типи даних під час операцій.
Також перетворення типу може бути явним, коли перетворення типу явно вказується у коді. Це називається приведенням типів.
Перетворення типів є важливим, оскільки воно дозволяє розробникам використовувати дані у різних форматах, зберігаючи при цьому відповідність типам даних, очікуваним в TypeScript. Це також допомагає забезпечити передбачувані результати виконання коду.
Явне приведення типів дозволяє переконатися, що код відповідає вимогам TypeScript щодо типів. Це робить код більш зрозумілим, читабельним та допомагає уникнути помилок, пов’язаних з типами.
Перетворення типів також сприяє перевірці даних, а інтегровані інструменти TypeScript, такі як автозаповнення, роблять розробку більш ефективною.
Звичайним випадком перетворення типів є перетворення між рядками та числами. При перетворенні рядка на число в TypeScript, з метою уникнення помилок, лише числові рядки можуть бути перетворені на числа. Наприклад, рядки “1”, “235” та “5234.5” можуть бути перетворені, а рядок “привіт” – ні.
Розглянемо різні способи перетворення рядків на числа в TypeScript:
Твердження Типу з Використанням “as”
Під час роботи з різними типами даних іноді розробник може знати про тип значення більше, ніж TypeScript. У таких випадках можна повідомити TypeScript, якого типу буде змінна, не дозволяючи компілятору визначати тип самостійно. Це називається твердженням типу.
Твердження типу виконується за допомогою ключового слова `as`. Щоб перетворити рядок на число за допомогою твердження типу, спочатку встановіть тип рядка на `unknown`. Це необхідно, оскільки за замовчуванням TypeScript вважає будь-яке перетворення рядка на число потенційно помилковим через відсутність прямого перекриття між ними. Для перетворення рядка на число потрібно виконати наступні кроки:
let numString: unknown = "23452"; let score = numString as number; console.log(score); console.log(score * 35);
Вивід:
23452 820820
Результат показує, що змінна `numString` була перетворена на число і присвоєна змінній `score`. Тепер можна виконувати числові операції, такі як множення.
Твердження Типу з Використанням “<>”
Твердження типу з використанням “<>” також може використовуватися для перетворення рядка на число. Воно працює так само, як використання `as`. Єдина відмінність полягає у синтаксисі:
let numString: unknown = "23452"; let score = <number>numString; console.log(score); console.log(score * 35);
Вивід:
23452 820820
Результат ідентичний попередньому випадку. Важливо пам’ятати, що не слід використовувати твердження типу для перетворення нечислових рядків.
Використання Конструктора Number
Для перетворення рядка на число за допомогою конструктора `Number` потрібно передати рядок, який потрібно перетворити, у конструктор, як показано нижче:
let numString = "23452"; let lives: string = "20"; let score = Number(numString) console.log(score / 17) let remainingLives = Number(lives); console.log(remainingLives - 4)
Вивід:
1379.5294117647059 16
При використанні конструктора `Number` не потрібно встановлювати тип рядка як `unknown`. Він працює з рядковими значеннями, тип яких задано явно або виведено з рядка. Проте, слід передавати лише числові рядки, такі як “514”. Якщо передати рядок, який не може бути перетворений на число, повернеться `NaN` (Not-a-Number).
Використання Унарного Оператора Плюс (+)
Унарний оператор плюс (+), застосований до операнда, повертає значення операнда. Наприклад, `+2` дорівнює числу 2, `+542` дорівнює числу 542. Якщо операнд не є числом, унарний оператор плюс намагається перетворити його на число.
Наприклад, `+”98″` дасть значення 98, а `+”0″` дасть значення 0. Тому ми можемо використовувати його для перетворення рядків на числа. Якщо передати нечисловий рядок, повернеться `NaN`, як показано нижче:
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;
console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);
Вивід:
23452 is a number 973.82 is a number NaN
Використання унарного оператора плюс (+) є ефективним способом перетворення рядків на числа, оскільки він є швидким і не виконує додаткових дій над операндом.
Використання parseInt() та parseFloat()
Подібно до JavaScript, TypeScript не розрізняє цілі числа та числа з плаваючою комою. Усі вони вважаються типом `number`. Однак, поведінка `parseInt()` та `parseFloat()` дещо відрізняється.
`parseInt()` приймає рядковий аргумент, аналізує його та повертає ціле число відповідно до вказаної системи числення. `parseFloat()` приймає рядок і повертає число з плаваючою комою.
Наприклад, якщо передати “897” до обох функцій, результатом буде число 897. Однак, якщо передати 897.75, `parseInt()` поверне 897, а `parseFloat()` – 897.75.
Отже, для перетворення числових рядків без десяткової частини варто використовувати `parseInt()`, а якщо рядки містять десяткові знаки – `parseFloat()`, як показано нижче:
let numString1 = "897.75";
let numString2 = "724";
let word = "hello";
console.log("Parsing numerical strings with decimal numbers")
console.log(`Using parseInt -> ${parseInt(numString1)}`);
console.log(`Using parseFloat -> ${parseFloat(numString1)}`);
console.log("Parsing numerical strings with whole numbers")
console.log(`Using parseInt -> ${parseInt(numString2)}`);
console.log(`Using parseFloat -> ${parseFloat(numString2)}`);
console.log("Parsing strings that can't convert to number")
console.log(parseInt(word));
console.log(parseFloat(word));
Вивід:
Parsing numerical strings with decimal numbers Using parseInt -> 897 Using parseFloat -> 897.75 Parsing numerical strings with whole numbers Using parseInt -> 724 Using parseFloat -> 724 Parsing strings that can't convert to number NaN NaN
Висновок
Під час роботи з рядковими значеннями, наприклад, отриманими з API, може виникнути потреба перетворити їх на числа для виконання числових операцій. У таких випадках можна використовувати описані вище методи.
Однак, слід бути обережними при перетворенні рядків на числа, оскільки можна отримати `NaN`, якщо рядок не є числовим.
Щоб уникнути таких помилок, переконайтеся, що рядки, які ви хочете перетворити на числа, є числовими. Також можна використовувати оператор `if` для перевірки на `NaN`, щоб уникнути помилок у коді.
Також варто вивчати популярні бібліотеки та середовища виконання TypeScript для розширення своїх знань розробника.