У цьому посібнику я покажу вам, як ви можете налагодити простий додаток на TypeScript, який імітує калькулятор. Мета полягає у виявленні помилки, через яку додавання двох чисел не дає очікуваний результат. У цьому практичному завданні використовуються інструменти розробника Chrome для аналізу коду та швидкого виявлення помилки. Цей посібник допоможе вам зрозуміти, наскільки важливим є налагодження та які інструменти можуть вам у цьому допомогти.
Найважливіші висновки
- Використання інструментів розробника Chrome дозволяє легко аналізувати стан вашого додатка.
- Перевірка типів в TypeScript допомагає виявляти помилки на ранніх етапах, перш ніж код буде виконаний.
- Важливою є роль типів та правильна обробка значень для уникнення помилок.
Пошаговий посібник
Спочатку запустіть свій веб-браузер Chrome і завантажте веб-додаток з реалізацією калькулятора на TypeScript. Проект вже має бути запущений на сервері, тому ви можете відкрити HTML-файл у Chrome.
Тепер вам слід переконатися, що в вашому проекті присутні як файл TypeScript, так і файл JavaScript (транспільований файл). У файлі TypeScript є коментарі та інформація про типи, у той час як транспільовані файли JavaScript не містять цієї інформації.
Відкрийте Chrome Developer Tools, клацнувши правою кнопкою миші на сторінці і обравши "Інспектувати" або натиснувши F12. Перейдіть на вкладку "Elements", щоб побачити HTML-код сторінки та переконатися, що поля введення та кнопка налаштовані правильно.
У калькуляторі є два поля для введення чисел та кнопка для виклику додавання. Ви можете ввести тестові значення та клацнути на кнопку. Ви помітите, що сума вираховується некоректно; можливо, ви отримаєте 22 замість очікуваних 4. Для вирішення цього розходження потрібне налагодження.
Тепер встановіть точку зупинки в своєму коді, клацнувши на функцію слухача подій. Це відбувається в розділі, відповідальному за додавання. Якщо ви введете значення у поля введення та клацнете на кнопку, ви повинні увійти в режим відлагоджування.
У виді аналізу відлагоджування ви зможете перевірити змінні. Особливо важливо перевіряти вміст тексту та значення полів введення, щоб побачити передані значення. Ви помітите, що значення полів введення є типу String, а не Number, як ви очікували.
Цей конфлікт типів призводить до того, що додавання не працює правильно. Замість додавання чисел вони конкатенуються. Наприклад: введення "1" і "6" дає результат "16", що не є бажаним результатом. Ця логічна помилка легко виявляється, але важливо її ідентифікувати.
Тепер ви повинні виправити помилку. Перейдіть до файлу TypeScript у Visual Studio Code і змініть спосіб обробки значень. Замість n1.value + n2.value використовуйте n1.valueAsNumber + n2.valueAsNumber, щоб переконатися, що це числа, а не рядки.
Після внесення змін збережіть файл і перезавантажте сторінку в Chrome. Перед додаванням значень переконайтеся, що ви їх переглядаєте. Цього разу правильна сума двох чисел буде відображена.
Якщо всі дії виконані правильно, натиснувши кнопку, ви отримаєте суму "10", якщо, наприклад, введете значення "2" та "8". Ви успішно виправили помилку та дізналися, наскільки важливою є типізація в TypeScript.
Крім того, ви можете скористатися перевагами TypeScript, чітко вказавши типи змінних. Це значно зменшує можливість помилок під час виконання. Завжди звертайте увагу на вказівку типів, щоб спростити налагодження.
У кінцевому підсумку ти також побачив, наскільки важливими є інструменти розробника Chrome для аналізу коду та поведінки додатка в реальному часі. Відлагодження за допомогою цих інструментів значно допомагає у вдосконаленні твоїх процесів розробки.
Підсумок
У цьому руководстві ти навчився, як відлагоджувати простий додаток на TypeScript. Особлива увага приділялася використанню інструментів розробника Chrome з урахуванням типів у TypeScript. Нарешті, ти усвідомив, наскільки важливо вчасно виявляти помилки та яке значення може мати перевірка типів в TypeScript.
Часто запитувані питання
Яка була основна помилка, виявлена у додатку на TypeScript?Основною помилкою було використання рядкових значень замість числових, що призвело до невірних обчислень.
Яку роль відіграють інструменти розробника Chrome у відлагодженні?Інструменти розробника Chrome допомагають аналізувати код в реальному часі та виявляти помилки в ході виконання програми.
Як уникнути помилок у TypeScript?Визначаючи типи у TypeScript, можна зменшити помилки в час виконання і переконатися, що використовуються лише правильні типи даних.
