Недавно я, используя React Native, занимался разработкой мобильного приложения для медитации Atomic Meditation. Эта программа помогает тем, кто ей пользуется, выработать привычку медитировать, ежедневно уделяя этому занятию какое-то время. В ходе работы у меня появились серьёзные причины приступить к изучению TypeScript и начать пользоваться им вместо JavaScript в проектах среднего и крупного размера.
Прежде чем я начну свой рассказ, мне хотелось бы отметить, что вы сможете разобраться в этой статье, даже если никогда не пользовались React Native. Я буду всё подробно объяснять. А если вы делали какие-нибудь проекты на React, то, читая эту статью, можете считать, что React и React Native — это одно и то же.
А теперь расскажу о том, как обычный JavaScript втянул меня в неприятности.
День 1: всё идёт как надо
В React Native есть объект AsyncStorage, который представляет собой хранилище данных типа ключ/значение с асинхронным доступом к значениям по ключам. Он даёт разработчику очень простой механизм для организации постоянного хранения данных на мобильном устройстве пользователя.
Например, воспользоваться им можно так:
AsyncStorage.setItem("@key", value)
AsyncStorage позволяет хранить лишь строковые данные. Поэтому для того чтобы поместить в это хранилище число — это число сначала надо конвертировать в строку.
Ниже показано применение React-хука useState для объявления переменной sessionCount и для установки её начального значения в 0. Тут же имеется и функция setSessionCount, которая позволяет менять состояние sessionCount:
const [sessionCount, setSessionCount] = useState(0)
Предположим, пользователь завершил сеанс медитации (я, напомню, занимался разработкой приложения для медитации). В sessionCount хранится общее количество сеансов медитации, завершённых пользователем (я буду теперь называть этого пользователя «Anxious Andy» — «беспокойный Энди»). Это значит, что нам надо прибавить 1 к значению, хранящемуся в sessionCount. Для этого вызывается функция setSessionCount, в которой и выполняется прибавление 1 к предыдущему значению sessionCount. А потом количество завершённых медитаций нужно сохранить в AsyncStorage в виде строки.
Всё это надо сделать в некоей функции, которую я предлагаю назвать saveData:
// Пользователь завершил сеанс медитации…
const saveData = () => {
setSessionCount(prev => {
const newSessionCount = prev + 1
AsyncStorage.setItem("@my_number", newSessionCount.toString())
return newSessionCount
})
}
Всё идёт хорошо, наш Энди, теперь уже не такой беспокойный, тихо закроет приложение, испытывая прилив хорошего самочувствия.
День 2: затишье перед бурей
Беспокойный Энди получает уведомление, которое напоминает ему о том, что через 5 минут начинается его медитация. Но он не только беспокойный, но ещё и нетерпеливый. Поэтому он тут же идёт к себе в комнату, находит своё рабочее кресло, удобно (но при этом — сохраняя ясное сознание) в него садится и открывает программу.
Теперь, когда программа загружается, данные сессии Энди нужно прочитать из хранилища. В React хук useEffect позволяет выполнять функцию-коллбэк при монтировании компонента.
В коллбэке мы асинхронно получаем данные из хранилища, а после этого вызываем функцию setSessionCount(), передавая ей эти данные, то есть — «1»:
useEffect(() => {
AsyncStorage.getItem("@my_number").then(data => setSessionCount(data))
}, [])
Беспокойный Энди успешно справляется с ещё одной медитацией. Поэтому к sessionCount надо добавить 1, что позволит сохранить общее число завершённых сеансов медитации.
Новое значение, как и прежде, мы записываем в хранилище:
// Пользователь завершил сеанс медитации…
const saveData = () => {
setSessionCount(prev => {
const newSessionCount = prev + 1
AsyncStorage.setItem("@my_number", newSessionCount.toString())
return newSessionCount
})
}
К настоящему моменту пользователь завершил 2 сеанса медитации.
День 3: буря
Энди, теперь — уже вовсе не беспокойный, достаёт телефон и открывает приложение для того чтобы в третий раз подряд устроить сеанс медитации (и дела у него идут хорошо).
Он хочет узнать о том, как далеко продвинулся в деле выработки полезной привычки. Поэтому он открывает экран статистики. «О, да тут много всего интересного», — приговаривает он. «Отличная программа!».
Но его любовь к этой программе быстро сходит на нет…
Программа сообщает ему о том, что он провёл 11 сеансов медитации. А он-то медитировал всего два раза!
Неправильная статистика по сеансам медитации
Что пошло не так?
В первый день мы записали в sessionCount начальное значение — число 0.
Пользователь завершил сеанс медитации — поэтому мы добавили к sessionCount 1. Затем мы преобразовали то, что получилось, в строку — в «1», после чего записали это в асинхронное хранилище (вспомните — оно может хранить только строковые данные).
Во второй день мы загружаем данные из хранилища и записываем в sessionCount загруженное значение. То есть — «1» (строку, а не число).
Пользователь завершает сеанс медитации и мы прибавляем к sessionCount 1. А в JavaScript «1» + 1 равняется «11», а не 2.
Мы забыли преобразовать строковые данные, считанные из хранилища, в число.
А хуже всего тут то, что наша программа при этом не выдала никаких сообщений об ошибках. Эта ошибка какое-то время оставалась незамеченной, а позже довела нас до неприятностей. Поиск источников подобных проблем может оказаться не таким уж и простым делом.
JavaScript позволил нам свободно, не сознавая того, что мы делаем, поменять в ходе выполнения программы тип данных, хранящихся в переменной.
Решить эту и другие подобные проблемы можно с помощью TypeScript.
Что такое TypeScript?
Если вы не знакомы с TypeScript, то знайте, что это, в сущности, то же самое, что и JavaScript, но оснащённое некоторыми полезными возможностями. В частности, переменные не могут менять типы. А если это случится — TypeScript выдаст сообщение об ошибке.
Браузеры не могут выполнять TypeScript-код. Поэтому TypeScript-файлы проекта надо транспилировать в JavaScript. На выходе получится несколько JavaScript-файлов (или один большой «бандл» с JS-кодом проекта).
Использование TypeScript в React Native-проектах
Добавить поддержку TypeScript в существующий React Native-проект очень просто. А именно, надо будет кое-что установить из npm и сделать пару настроек.
Теперь нужно будет лишь переименовать файлы с кодом, например — App.js в App.tsx, после чего заработает автоматическая система контроля типов.
После того, как изменено расширение файла, TypeScript разразится гневной тирадой о том, что аргумент типа 'string | null' нельзя назначить параметру типа 'SetStateAction<number>'.
TypeScript предупреждает разработчика о том, что с типами данных что-то не так
Это значит, что мне тут, чтобы избавиться от сообщения об ошибке, надо, во-первых, проверить data на null, а во-вторых — преобразовать из строки в число (воспользовавшись parseInt()):
useEffect(() => {
AsyncStorage.getItem("@my_number").then(data => {
if (data) {
setSessionCount(parseInt(data))
}
})
}, [])
Использование TypeScript подталкивает разработчика к написанию более качественного и надёжного кода. Это просто замечательно!
По каким материалам изучать TypeScript?
Я изучал TypeScript по этому видеокурсу канала Net Ninja. И если бы мне надо было бы что-нибудь изучить, то я в первую очередь поинтересовался бы тем, нет ли на этом канале курса по тому, что мне нужно.
Кроме того, официальная документация по TypeScript очень даже хороша.
Итоги
Теперь, благодаря TypeScript, я могу спать немного спокойнее, зная о том, что переменные в моём проекте не могут совершенно неожиданно менять свои типы. Спасибо за это TypeScript.
Да, не могу не отметить, что JavaScript хорошо подходит для маленьких проектов. Но при работе над средними и большими проектами, а так же — над маленькими проектами, которые вполне могут вырасти, лучше, пожалуй, прибегнуть к TypeScript, даже если для этого придётся потратить время на его изучение. А если вы знаете JavaScript, то и TypeScript освоите без особого труда.
Используете ли вы TypeScript в своих React-проектах?
Сказки
Русская народная сказка
Жил да был крестьянин. Умерла у него жена, осталось три дочки. Хотел старик нанять работницу — в хозяйстве помогать. Но меньшая дочь, Марьюшка, сказала:
— Не надо, батюшка, нанимать работницу, сама я буду хозяйство вести.
Ладно. Стала дочка Марьюшка хозяйство вести. Все-то она умеет, все-то у нее ладится. Любил отец Марьюшку: рад был, что такая умная да работящая дочка растет. Из себя-то Марьюшка красавица писаная. А сестры ее завидущие да жаднющие, из себя-то они некрасивые, а модницы-перемодницы — весь день сидят да белятся, да румянятся, да в обновки наряжаются, платья им — не платья, сапожки — не сапожки, платок — не платок.
Поехал отец на базар и спрашивает дочек:
— Что вам, дочки, купить, чем порадовать?
И говорят старшая и средняя дочки:
— Купи по полушалку, да такому, чтоб цветы покрупнее, золотом расписанные.
А Марьюшка стоит да молчит. Спрашивает ее отец:
— А что тебе, доченька, купить?
— Купи мне, батюшка, перышко Финиста — ясна сокола.
Приезжает отец, привозит дочкам полушалки, а перышка не нашел.
Поехал отец в другой раз на базар.
— Ну, — говорит, — дочки, заказывайте подарки.
Обрадовались старшая и средняя дочки:
— Купи нам по сапожкам с серебряными подковками.
А Марьюшка опять заказывает;
— Купи мне, батюшка, перышко Финиста — ясна сокола.
Ходил отец весь день, сапожки купил, а перышка не нашел. Приехал без перышка.
Ладно. Поехал старик в третий раз на базар, а старшая и средняя дочки говорят:
— Купи нам по платью.
А Марьюшка опять просит;
— Батюшка, купи перышко Финиста — ясна сокола.
Ходил отец весь день, а перышка не нашел. Выехал из города, а навстречу старенький старичок:
— Здорово, дедушка!
— Здравствуй, милый! Куда путь-дорогу держишь?
— К себе, дедушка, в деревню. Да вот горе у меня: меньшая дочка наказывала купить перышко Финиста — ясна сокола, а я не нашел.
— Есть у меня такое перышко, да оно заветное; но для доброго человека, куда ни шло, отдам.
Вынул дедушка перышко и подает, а оно самое обыкновенное. Едет крестьянин и думает: «Что в нем Марьюшка нашла хорошего?»
Привез старик подарки дочкам, старшая и средняя наряжаются да над Марьюшкой смеются:
— Как была ты дурочка, так и есть. Нацепи свое перышко в волоса да красуйся!
Промолчала Марьюшка, отошла в сторону, а когда ьсе спать полегли, бросила Марьюшка перышко на пол и проговорила:
— Любезный Финист — ясный сокол, явись ко мне, жданный мой жених!
И явился ей молодец красоты неописанной. К утру молодец ударился об пол и сделался соколом. Отворила ему Марьюшка окно, и улетел сокол к синему небу.
Три дня Марьюшка привечала к себе молодца; днем он летает соколом по синему поднебесью, а к ночи прилетает к Марьюшке и делается добрым молодцем.
На четвертый день сестры злые заметили — наговорили отцу на сестру.
— Милые дочки, — говорит отец, — смотрите лучше за собой!
«Ладно, — думают сестры, — посмотрим, как будет дальше».
Натыкали они в раму острых ножей, а сами притаились, смотрят. Вот летит ясный сокол. Долетел до окна и не может попасть в комнату Марьюшки. Бился, бился, всю грудь изрезал, а Марьюшка спит и не слышит. И сказал тогда сокол:
— Кому я нужен, тот меня найдет. Но это будет нелегко. Тогда меня найдешь, когда трое башмаков железных износишь, трое посохов железных изломаешь, трое колпаков железных порвешь.
Услышала это Марьюшка, вскочила с кровати, посмотрела в окно, а сокола нет, и только кровавый след на окне остался. Заплакала Марьюшка горькими слезами — смыла слезками кровавый след и стала еще краше.
Пошла она к отцу и проговорила:
— Не брани меня, батюшка, отпусти в путь-дорогу дальнюю. Жива буду — свидимся, умру — так, знать, на роду написано.
Жалко было отцу отпускать любимую дочку, но отпустил.
Заказала Марьюшка трое башмаков железных, трое посохов железных, трое колпаков железных и отправилась в путь-дорогу дальнюю, искать желанного Финиста — ясна сокола. Шла она чистым полем, шла темным лесом, высокими горами. Птички веселыми песнями ей сердце радовали, ручейки лицо белое умывали, леса темные привечали. И никто не мог Марьюшку тронуть; волки серые, медведи, лисицы — все звери к ней сбегались. Износила она башмаки железные, посох железный изломала и колпак железный порвала.
И вот выходит Марьюшка на поляну и видит: стоит избушка на курьих ножках — вертится. Говорит Марьюшка:
— Избушка, избушка, встань к лесу задом, ко мне передом! Мне в тебя лезть, хлеба есть.
Повернулась избушка к лесу задом, к Марьюшке передом. Зашла Марьюшка в избушку и видит: сидит там баба-яга — костяная нога, ноги из угла в угол, губы на грядке, а нос к потолку прирос.
Увидела баба-яга Марьюшку, зашумела:
— Тьфу, тьфу, русским духом пахнет! Красная девушка, дело пытаешь аль от дела лытаешь?
— Ищу, бабушка, Финиста—ясна сокола.
— О красавица, долго тебе искать! Твой ясный сокол за тридевять земель, в тридевятом государстве. Опоила его зельем царица-волшебница и женила на себе. Но я тебе помогу. Вот тебе серебряное блюдечко и золотое яичко. Когда придешь в тридевятое царство, наймись работницей к царице. Покончишь работу — бери блюдечко, клади золотое яичко, само будет кататься. Станут покупать — не продавай. Просись Финиста — ясна сокола повидать.
Поблагодарила Марьюшка бабу-ягу и пошла. Потемнел лес, страшно стало Марьюшке, боится и шагнуть, а навстречу кот. Прыгнул к Марьюшке и замурлыкал:
— Не бойся, Марьюшка, иди вперед. Будет еще страшнее, а ты иди и иди, не оглядывайся.
Потерся кот спинкой и был таков, а Марьюшка пошла дальше. А лес стал еще темней.
Шла, шла Марьюшка, башмаки железные износила, посох поломала, колпак порвала и пришла к избушке на курьих ножках. Вокруг тын, на кольях черепа, и каждый череп огнем горит.
Говорит Марьюшка:
— Избушка, избушка, встань к лесу задом, ко мне передом! Мне в тебя лезть, хлеба есть.
Повернулась избушка к лесу задом, к Марьюшке передом. Зашла Марьюшка в избушку и видит: сидит там баба-яга — костяная нога, ноги из угла в угол, губы на грядке, а нос к потолку прирос.
Увидела баба-яга Марьюшку, зашумела:
— Тьфу, тьфу, русским духом пахнет! Красная девушка, дело пытаешь аль от дела лытаешь?
— Ищу, бабушка, Финиста — ясна сокола.
— А у моей сестры была?
— Была, бабушка.
— Ладно, красавица, помогу тебе. Бери серебряные пяльцы, золотую иголочку. Иголочка сама будет вышивать серебром и золотом по малиновому бархату. Будут покупать — не продавай. Просись Финиста — ясна сокола повидать.
Поблагодарила Марьюшка бабу-ягу и пошла. А в лесу стук, гром, свист, черепа лес освещают. Страшно стало Марьюшке. Глядь, собака бежит:
— Ав, ав, Марьюшка, не бойся, родная, иди. Будет еще страшнее, не оглядывайся.
Сказала и была такова. Пошла Марьюшка, а лес стал еще темнее. За ноги ее цепляет, за рукава хватает… Идет Марьюшка, идет и назад не оглянется.
Долго ли, коротко ли шла — башмаки железные износила, посох железный поломала, колпак железный порвала. Вышла на полянку, а на полянке избушка на курьих ножках, вокруг тын, а на кольях лошадиные черепа; каждый череп огнем горит.
Говорит Марьюшка:
— Избушка, избушка, встань к лесу задом, а ко мне передом!
Повернулась избушка к лесу задом, а к Марьюшке передом. Зашла Марьюшка в избушку и видит: сидит баба-яга — костяная нога, ноги из угла в угол, губы на грядке, а нос к потолку прирос. Сама черная, а во рту один клык торчит.
Увидела баба-яга Марьюшку, зашумела:
— Тьфу, тьфу, русским духом пахнет! Красная девушка, дело пытаешь аль от дела пытаешь?
— Ищу, бабушка, Финиста — ясна сокола.
— Трудно, красавица, тебе будет его отыскать, да я помогу. Вот тебе серебряное донце, золотое веретенце. Бери в руки, само прясть будет, потянется нитка не простая, а золотая.
— Спасибо тебе, бабушка.
— Ладно, спасибо после скажешь, а теперь слушай, что тебе накажу: будут золотое веретенце покупать — не продавай, а просись Финиста — ясна сокола повидать.
Поблагодарила Марьюшка бабу-ягу и пошла, а лес зашумел, загудел: поднялся свист, совы закружились, мыши из нор повылезли—да все на Марьюшку. И ви дит Марьюшка — бежит навстречу серый волк.
— Не горюй, — говорит он, — а садись на меня и не оглядывайся.
Села Марьюшка на серого волка, и только ее и видели. Впереди степи широкие, луга бархатные, реки медовые, берега кисельные, горы в облака упираются. А Марьюшка скачет и скачет. И вот перед Марьюшкой хрустальный терем. Крыльцо резное, оконца узорчатые, а в оконце царица глядит.
— Ну, — говорит волк, — слезай, Марьюшка, иди и нанимайся в прислуги.
Слезла Марьюшка, узелок взяла, поблагодарила волка и пошла к хрустальному дворцу. Поклонилась Марьюшка царице и говорит:
— Не знаю, как вас звать, как величать, а не нужна ли вам будет работница?
Отвечает царица:
Давно я ищу работницу, но такую, которая могла бы прясть, ткать, вышивать.
— Все это я могу делать.
— Тогда проходи и садись за работу.
И стала Марьюшка работницей. День работает, а наступит ночь — возьмет Марьюшка серебряное блюдечко золотое яичко и скажет:
— Катись, катись, золотое яичко, по серебряному блюдечку, покажи мне моего милого.
Покатится яичко по серебряному блюдечку, и предстанет Финист — ясный сокол. Смотрит на него Марьюшка и слезами заливается:
— Финист мой, Финист — ясный сокол, зачем ты меня оставил одну, горькую, о тебе плакать!
Подслушала царица ее слова и говорит:
— Продай ты мне, Марьюшка, серебряное блюдечко и золотое яичко.
— Нет, — говорит Марьюшка, — они непродажные. Могу я тебе их отдать, если позволишь на Финиста — ясна сокола поглядеть.
Подумала царица, подумала.
— Ладно, — говорит, — так и быть. Ночью, как он уснет, я тебе его покажу.
Наступила ночь, и идет Марьюшка в спальню к Финисту — ясну соколу. Видит она — спит ее сердечный друг сном непробудным. Смотрит Марьюшка не насмотрится, целует в уста сахарные, прижимает к груди белой, — спит не пробудится сердечный друг.
Наступило утро, а Марьюшка не добудилась милого…
Целый день работала Марьюшка, а вечером взяла серебряные пяльцы да золотую иголочку. Сидит вышивает, сама приговаривает:
— Вышивайся, вышивайся, узор, для Финиста — ясна сокола. Было бы чем ему по утрам вытираться.
Подслушала царица и говорит:
— Продай, Марьюшка, серебряные пяльцы, золотую иголочку.
— Я не продам, — говорит Марьюшка, — а так отдам, разреши только с Финистом — ясным соколом свидеться.
Подумала та, подумала.
— Ладно, — говорит, — так и быть, приходи ночью.
Наступает ночь. Входит Марьюшка в спаленку к Финисту — ясну соколу, а тот спит сном непробудным.
— Финист ты мой, ясный сокол, встань, пробудись!
Спит Финист — ясный сокол крепким сном. Будила его Марьюшка — не добудилась.
Наступает день.
Сидит Марьюшка за работой, берет в руки серебряное донце, золотое веретенце. А царица увидала: продай да продай!
— Продать не продам, а могу и так отдать, если позволишь с Финистом — ясным соколом хоть часок побыть.
— Ладно, — говорит та.
А сама думает: «Все равно не разбудит».
Настала ночь. Входит Марьюшка в спальню к Финисту — ясну соколу, а тот спит сном непробудным.
— Финист ты мой — ясный сокол, встань, пробудись!
Спит Финист, не просыпается.
Будила, будила — никак не может добудиться, а рассвет близко.
Заплакала Марьюшка:
— Любезный ты мой Финист — ясный сокол, встань, пробудись, на Марьюшку свою погляди, к сердцу своему ее прижми!
Упала Марьюшкина слеза на голое плечо Финиста — ясна сокола и обожгла. Очнулся Финист — ясный сокол, осмотрелся и видит Марьюшку. Обнял ее, поцеловал:
— Неужели это ты, Марьюшка! Трое башмаков износила, трое посохов железных изломала, трое колпаков железных поистрепала и меня нашла? Поедем же теперь на родину.
Стали они домой собираться, а царица увидела и приказала в трубы трубить, об измене своего мужа оповестить.
Собрались князья да купцы, стали совет держать, как Финиста — ясна сокола наказать.
Тогда Финист — ясный сокол говорит:
— Которая, по-вашему, настоящая жена: та ли, что крепко любит, или та, что продает да обманывает?
Согласились все, что жена Финиста — ясна сокола — Марьюшка.
И стали они жить-поживать да добра наживать. Поехали в свое государство, пир собрали, в трубы затрубили, в пушки запалили, и был пир такой, что и теперь помнят.