Свободи JavaScript: Як TypeScript рятує ситуацію

Налагодження може бути досить дратівливим, але без сумніву це завжди чудовий досвід навчання! Зараз я вдосконалюю свої знання з React, і слідуючи цьому підручнику, я працюю над простим додатком для списку покупок. Спочатку здавалося, що це незначна помилка, але вона навчила мене важливості типобезпеки та узгодженості даних.

Проблема: Чому замість додавання "1" відбувалось з'єднання рядків?

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

const addItem = (item) => {  
 const id = items.length ? items[items.length - 1].id + 1 : 1;  
 const myNewItem = { id, checked: false, item };  
 const listItems = [...items, myNewItem];  
 setItems(listItems);  
};

Замість того, щоб інкрементувати id числово, воно конкатенувалося з "1" до останнього рядка id. Наприклад:

• Коли останній id був "3", наступний id став "31" (замість 4)
• Коли останній id був "31", наступний id став "311".

Операція додавання сприймала id як рядок, а не число. Підручник, яким я користувався, давав інші результати. Це змусило мене уважніше розглянути код, і на перший погляд я нічого не помітив!

Пізніше я з'ясував, що корінь проблеми полягає в моїй базі даних JSON.
Спочатку масив items зберігав значення id як рядки:

{  
 "items": [  
 {  
 "id": "1",  
 "checked": false,  
 "item": "Мигдаль, без солі, в синій упаковці"  
 },  
 {  
 "id": "2",  
 "checked": false,  
 "item": "Піца"  
 },  
 {  
 "id": "3",  
 "checked": false,  
 "item": "Хліб"  
 }  
 ]  
}

Це змусило JavaScript сприймати id як рядок, і тому, коли виконувалася операція id + 1, типова перетворення типів JavaScript з’єднувала рядок "1" з існуючим id, що призводило до неочікуваної поведінки.

Швидке вирішення полягало в оновленні JSON, щоб зберігати значення id як числа:

{  
 "items": [  
 {  
 "id": 1,  
 "checked": false,  
 "item": "Мигдаль, без солі, в синій упаковці"  
 },  
 {  
 "id": 2,  
 "checked": false,  
 "item": "Піца"  
 },  
 {  
 "id": 3,  
 "checked": false,  
 "item": "Хліб"  
 }  
 ]  
}

Після цієї зміни функція addItem працювала як очікувалося, і нові значення id коректно інкрементувалися числово.

Цей досвід наочно продемонстрував, як легко в JavaScript можна не помітити баги, пов'язані з типами даних.
У реальних, виробничих додатках покладання лише на перевірки під час виконання може призвести до уникнутих проблем. Саме тут TypeScript проявляє свої переваги.

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

1. Опис масиву items:

type Item = { id: number; checked: boolean; item: string; }; const items: Item[] = [];

Якщо б id був оголошений як number, TypeScript викинув би помилку, якщо API повернув би рядок замість числа для id.

2. Гарантування послідовності відповіді API: Описуючи структуру відповіді API, TypeScript виявив би будь-які невідповідності типів:

const fetchItems = async (): Promise<Item[]> => { const response = await fetch(API_URL); const data: Item[] = await response.json(); return data; };

3.
**Типобезпечні операції: TypeScript запобігає операціям, які змішують несумісні типи, наприклад, додаванню числа до рядка, фіксуючи помилку під час розробки, а не на етапі виконання.

Остаточні думки

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

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

Чи стикалися ви з подібними проблемами через приведення типів? Поділіться своїми думками та досвідом — давайте разом освоювати потужність TypeScript!

Перекладено з: JavaScript Liberties: How TypeScript Saves the Day