JavaScript був призначений для написання коротких фрагментів коду лише з кількох рядків, які мали бути вбудовані у веб-сторінки. Ніхто не міг передбачити, що JavaScript стане таким популярним, як зараз, або що його використовуватимуть для написання програм із тисячами рядків коду.
Незважаючи на те, що JavaScript виріс і зараз широко використовується для створення програм, він не є ідеальною мовою. Його скромний початок і початкове призначення означають, що JavaScript має деякі особливості, які можуть перетворити створення великомасштабних програм на кошмар.
Наприклад, JavaScript не видає помилку, коли ви посилаєтеся на елементи, які не існують в об’єкті, або коли ви множите null на числове значення.
Для JavaScript порожній рядок (“”) дорівнює 0 (нулю), коли вони порівнюються за допомогою оператора рівності (==). Що ще гірше, JavaScript не покаже вам такі помилки у вашому коді під час розробки. Ви побачите помилки лише після виконання програми.
TypeScript, створений на основі JavaScript, був розроблений, щоб полегшити проблеми, які виникають під час створення програм за допомогою JavaScript. Щоб досягти цього, TypeScript виконує статичну перевірку типів під час написання коду.
Статична перевірка означає виявлення помилок у вашому коді без необхідності запуску коду. Статична перевірка типу, таким чином, перевіряє наявність помилок під час розробки на основі типу значень, з якими оперується в коді.
TypeScript — це типізований набір JavaScript. Будучи надмножиною JavaScript означає, що будь-який дійсний код JavaScript також є дійсним TypeScript. Бути введеним означає, що TypeScript додає правила щодо використання різних типів даних. TypeScript також строго типізований, і ви не можете обійти обмеження, накладені системою типів.
TypeScript є важливою віхою та значним досягненням у веб-розробці. TypeScript дозволяє писати більш читабельний код, який легко підтримувати. Він також забезпечує дотримання правил кодування та допомагає розробникам виявляти та уникати помилок під час написання коду.
TypeScript є більш надійним і простим у рефакторингу, що робить його ідеальним для створення великомасштабних програм порівняно з JavaScript. Оскільки TypeScript є строго типізованим, давайте розглянемо перетворення типів, його важливість і те, як TypeScript обробляє перетворення типів.
Перетворення типів у TypeScript та його важливість
Перетворення типу — це процес перетворення значення з одного типу даних в інший, наприклад перетворення рядкового значення на число. Перетворення типів може виконуватися неявно, коли компілятор автоматично перетворює сумісні типи даних під час ускладнень.
Перетворення типу також може бути явним, якщо перетворення типу явно вимагається у вихідному коді. Це часто називають приведенням типів.
Перетворення типів є важливим, оскільки воно дозволяє розробникам працювати з різними форматами даних, зберігаючи при цьому відповідність очікуваним типам даних у TypeScript. Це також допомагає забезпечити передбачувані результати вихідних кодів.
Як розробник, самостійне приведення типів допомагає переконатися, що ваш код усе ще відповідає вимогам TypeScript до типів. Це робить ваш код більш читабельним і зрозумілим і допомагає запобігти помилкам, пов’язаним з типом.
Перетворення типів також допомагає підтримувати перевірку даних, і це допомагає TypeScript допомогти вам у розробці, надаючи всі вбудовані інструменти, такі як автозаповнення, які пов’язані з певними типами.
Звичайним випадком перетворення типів є рядки та числа. Під час перетворення рядків на числа в TypeScript, щоб уникнути помилок у вашому коді, перетворюються лише числові рядки на числа. Тобто ви можете конвертувати такі рядки, як «1», «235», «5234.5» і так далі. Однак не перетворюйте рядки, такі як «привіт», на число
Давайте розглянемо різні способи перетворення рядків на числа в TypeScript:
Введіть твердження за допомогою “як”
Під час роботи з різними типами даних у вашому коді TypeScript іноді ви матимете більше інформації про тип значення, про який TypeScript не може знати. У таких випадках ви повідомляєте TypeScript, якого типу буде змінна, і не дозволяєте компілятору визначити тип. Це називається твердженням типу.
Затвердження типу здійснюється за допомогою ключового слова as. Щоб використовувати твердження типу для перетворення рядка на число, спочатку встановіть тип рядка на невідомий. Це тому, що за замовчуванням TypeScript вважає будь-яке перетворення рядка типу в число потенційно помилковим. Це пояснюється тим, що ні рядок, ні число достатньою мірою не накладаються одне на одне. Щоб перетворити рядок на число, виконайте такі дії, як показано нижче:
/** * set the type of numString to be unkown, otherwise, * Typescript will infer numString to be a string value */ let numString: unknown = "23452"; // Type conversion using as - numString is converted to a number // and assigned to the variable score let score = numString as number; console.log(score); console.log(score * 35);
Вихід:
23452 820820
З результату зверніть увагу, що змінну numString було перетворено на число та призначено оцінці. Тоді ми можемо виконувати числові обчислення, наприклад множення на рахунок, оскільки його значення є числом
Введіть твердження за допомогою <>
Затвердження типу з використанням <> також можна використовувати для перетворення рядка на число. Це працює так само, як використання ключового слова as. Єдина відмінність у реалізації полягає в синтаксисі, який показано нижче:
let numString: unknown = "23452"; // Type assertion using <> to convert a string to a number let score = <number>numString; console.log(score); console.log(score * 35);
Вихід:
23452 820820
Результат такий самий, як і при використанні ключового слова as. Знову ж таки, пам’ятайте, що не слід використовувати твердження типу для перетворення рядків, які не містять числових значень.
Використання конструктора чисел
Щоб перетворити рядок на число за допомогою передачі конструктора Number у рядку, який потрібно перетворити на конструктор Number, як показано у фрагменті коду нижче:
let numString = "23452"; // type inferred to string let lives: string = "20"; // type annotated to string // pass in string to Number constructor to convert to number let score = Number(numString) console.log(score / 17) // pass in string to Number constructor to convert to number let remainingLives = Number(lives); console.log(remainingLives - 4)
Вихід:
1379.5294117647059 16
Під час використання конструктора Number вам не потрібно встановлювати тип рядка як невідомий. Він працює з рядковими значеннями, які були анотовані або виведені з рядка. Однак пам’ятайте про передачу числових рядків, наприклад «514». Якщо передати рядок, який не можна перетворити на число, буде повернено NaN (Not-a-Number).
Використання унарного оператора плюс (+).
Унарний оператор плюс (+), який передує одному операнду, обчислюється як операнд, якому передує. Наприклад, +2 обчислюється як число 2, +542 обчислюється як число 542 і так далі. Однак, якщо операнд не є числом, унарний оператор плюс (+) намагається перетворити його на число.
Наприклад, +”98” дасть значення 98, а +”0” дасть значення 0. Тому ми можемо використовувати унарний оператор плюс (+), щоб перетворити рядки на числа. Якщо ви передаєте рядок, який не можна перетворити на число, NaN повертається, як показано нижче:
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
// Using the Unary plus (+) to convert strings to numbers
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 не розрізняє цілі числа та десяткові числа, також відомі як числа з плаваючою комою. Усі вони вважаються номерами типу. Тим не менш, поведінка parseInt() і parseFloat() дещо відрізняється.
parseInt() приймає рядковий аргумент, аналізує його та повертає цілочисельний еквівалент відповідно до вказаної основи. parseFloat() приймає рядок і аналізує його, повертаючи число з плаваючою комою.
Наприклад, якщо передати «897» і parseInt(), і parseFloat(), ви отримаєте число 897. Однак якщо передати 897.75 і parseInt(), і parseFloat(), 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, щоб знати як розробник.
