{"time":1742028618097,"blocks":[{"id":"UJVngcKIk7","type":"paragraph","data":{"text":"JavaScript долгое время был королем веб-разработки, гибким и всепрощающим. Но с ростом сложности проектов его слабая типизация стала больше проблемой, чем преимуществом. TypeScript — строгий, надежный, предсказуемый — набирает популярность, обещая избавить разработчиков от множества ошибок. Так умирает ли JavaScript без типизации, или он по-прежнему незаменим? Давайте разберемся."}},{"id":"BXVIok9wZg","type":"header2","data":{"text":"Проблема динамической типизации","level":2},"tunes":{}},{"id":"QfuEzegcJC","type":"paragraph","data":{"text":"Как мы обычно объявляем переменные в JavaScript? Просто пишем let или const, даём имя и присваиваем значение:"}},{"id":"YMTUVc6ZUE","type":"code","data":{"code":"let userName = \"Анна\";\nconst userAge = 25;","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"sd0JDBldeF","type":"paragraph","data":{"text":"Никаких указаний типа. JavaScript не требует от нас заранее объявлять, что userName — это строка (string), а userAge — число (int). И в этом кроется как сила, так и слабость языка."}},{"id":"442e8aba-75a7-4cdf-a97e-0def8590ae7f","type":"banner-blank","data":{}},{"id":"B-sqk8mErx","type":"paragraph","data":{"text":"В JavaScript переменная может хранить любое значение: строку, число, объект, функцию — что угодно. Более того, мы можем менять тип переменной прямо в процессе выполнения:"}},{"id":"gL-oDzN29U","type":"code","data":{"code":"let data = 42; // data -- число\ndata = \"Привет\"; // а теперь строка\ndata = { id: 100 }; // теперь объект\ndata = () => \"wow\"; // а теперь функция","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"hAPBrEq3mH","type":"paragraph","data":{"text":"Это и есть динамическая типизация — система, когда тип переменной определяется не на этапе написания кода, а во время его выполнения, и может свободно меняться."}},{"id":"iigEMWP02g","type":"paragraph","data":{"text":"Удобно, да? Не надо прописывать int или string, среда сама определит, какой тип у переменной. Только вот иногда такой подход приводит к куче ошибок, особенно когда мы имеем дело с большим проектом."}},{"id":"db6zyQVYB2","type":"paragraph","data":{"text":"Разберём на примере функции, которая рассчитывает итоговую стоимость товаров:"}},{"id":"JNiOD96ccc","type":"code","data":{"code":"// Пользователь добавил два товара в корзину, цены пришли из формы\nconst price1 = \"500\"; // цена первого товара (строка)\nconst price2 = \"300\"; // цена второго товара (строка)\n\nconst totalPrice = price1 + price2; // Ожидаем сумму 800 рублей\nconsole.log(totalPrice); // \"500300\" -- что-то пошло не так!","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"GbaRJDZ5cO","type":"paragraph","data":{"text":"В этом примере мы получим 500300 вместо 800. Дело в том, что мы данные здесь в виде строки, а не числа. При этом во время выполнения JS решил, что мы хотим провести конкатенацию строк, и склеил числа."}},{"id":"VXf4ueEln7","type":"paragraph","data":{"text":"Такие ошибки периодически встречаются, например, если пользователь вводит некорректные данные в форму, либо в коде забыли про преобразование ввода в нужный тип данных."}},{"id":"108abf86-3ba2-4f6d-9d90-8d2d8e6ea2ee","type":"banner-blank","data":{}},{"id":"5pd9uXcCSq","type":"paragraph","data":{"text":"В статье «Python Versus C++: An Analysis of Student Struggle on Small Coding Exercises in Introductory Programming Courses» проанализировали успехи студентов в решении задач по программированию на Python и C++. Студенты, которые работали с Python, чаще сталкивались с трудностями при решении задач (23% против 13% у C++) и это при том, что задачи были одинаковые. Python — язык с такой же динамической типизацией данных, как и JS. Большинство трудностей студентов были связаны с ошибками типизации. Вывод: динамическая типизация увеличивает количество ошибок."}},{"id":"ErkRUWMjwX","type":"header3","data":{"text":"Критичность ошибки с типами в крупных проектах","level":3},"tunes":{}},{"id":"WZCOQoPQ9C","type":"paragraph","data":{"text":"Теперь представьте, что мы работаем над системой рекомендаций в каком-нибудь крупном сервисе по типу Netflix. У нас десятки тысяч строк кода, тысячи переменных, и нам непонятно, какого они типа."}},{"id":"Z3U6TcE1-n","type":"paragraph","data":{"text":"В коде таких проектов очень сложно ориентироваться, особенно новым членам команды. Мы не можем с ходу понять, какие типы принимают переменные и функции, никогда не знаешь, где вылезет ошибка."}},{"id":"9OWHhWww6b","type":"paragraph","data":{"text":"А если это банковское приложение и команда прохлопала ошибку с типизацией? Ведь IDE её не подсветит, да и отладка может проигнорировать проблему с типами. Тогда из-за обидного бага компания каждую минуту будет терять бешеные деньги."}},{"id":"2pICkoQkKU","type":"header2","data":{"text":"Инструменты JS для борьбы с ошибками типов и их недостатки","level":2},"tunes":{}},{"id":"eTO0bnxSfb","type":"paragraph","data":{"text":"Не поймите неправильно, динамическая типизация — это удобно. Мы можем быстро разрабатывать прототипы, небольшие проекты и функции. Но в крупных проектах, таких как системы e-commerce или банковские приложения, где кодовая база превышает десятки тысяч строк, она может стать источником скрытых ошибок."}},{"id":"13154208-3284-43c6-9934-d8cf283e260b","type":"banner-blank","data":{}},{"id":"_ZjMhK6mLG","type":"paragraph","data":{"text":"В JS есть инструменты, которые нивелируют эту проблему, но они тоже со своими нюансами:"}},{"id":"mJIso_qTSG","type":"paragraph","data":{"text":"JSDoc — аннотации типов прямо в комментариях, которые подсказывают IDE (например, VS Code) и разработчикам, что ожидается в коде:"}},{"id":"oHMUzzLJAD","type":"code","data":{"code":"/** @type {{ id: number, name: string }} */\nconst user = { id: 1, name: \"Анна\" };","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"ELvObpPOKH","type":"paragraph","data":{"text":"Плюс: даёт автодополнение и базовую проверку типов в редакторе. Минус: это не часть языка, а просто подсказки — JS сам по себе их не проверяет на этапе выполнения или сборки."}},{"id":"J0RxDag5JQ","type":"paragraph","data":{"text":"'use strict' — включает строгий режим, который ловит некоторые ошибки (например, использование необъявленных переменных):"}},{"id":"YD7BNFw3Xb","type":"code","data":{"code":"'use strict';\nfoo = 42; // ReferenceError: foo is not defined","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"oZGTmkPk5c","type":"paragraph","data":{"text":"Плюс: убирает часть «опасных» особенностей JS. Минус: не влияет на типизацию напрямую, а только на синтаксис и поведение."}},{"id":"tzBaPZN5ah","type":"paragraph","data":{"text":"Ручная проверка в applyDiscount. Мы можем добавлять свои проверки типов:"}},{"id":"CvzQBKX4nF","type":"code","data":{"code":"function applyDiscount(price, discount) {\n if (typeof price !== 'number' || typeof discount !== 'number') {\n throw new Error('Аргументы должны быть числами');\n }\n return price - (price * discount / 100);\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"uRVZ2eUMUZ","type":"paragraph","data":{"text":"Плюс: полный контроль над поведением. Минус: это ручной труд, придется писать проверку для каждой функции, и код не сможет масштабироваться."}},{"id":"QRugReUycs","type":"paragraph","data":{"text":"Эти инструменты решают часть проблем динамической типизации, но есть кое-что, что справляется с этой задачей лучше."}},{"id":"7qGRATYTgt","type":"header2","data":{"text":"Что такое TypeScript и как он решает проблему типизации","level":2},"tunes":{}},{"id":"SVoJXbGUf4","type":"header3","data":{"text":"Строгая статическая типизация","level":3},"tunes":{}},{"id":"_0NIMb1EkY","type":"paragraph","data":{"text":"TypeScript — язык программирования от Microsoft со строгой статической типизацией. Это значит, что перед объявлением переменной мы заранее определяем тип данных. Например, вот так выглядит переменная строки в JS и TS:"}},{"id":"QjWeBkNO70","type":"code","data":{"code":"// В JavaScript (JS)\nlet jsString = \"Привет, мир!\";\n\n// В TypeScript (TS)\nlet tsString: string = \"Привет, мир!\";","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"pzGSUTW7Iy","type":"paragraph","data":{"text":"Мы добавляем к переменной tsString тип данных — string, тем самым, явно указываем, что наша переменная — это строка. Благодаря этому среда понимает тип данных до выполнения кода и распознаёт больше потенциальных ошибок."}},{"id":"GpN9UXt3Ut","type":"paragraph","data":{"text":"При этом код на TypeScript компилируется в JavaScript. Так у нас сохраняются преимущества JS, но со статической типизацией и минимумом ошибок."}},{"id":"XXCBKR_Ngm","type":"header3","data":{"text":"Более удобная работа в IDE","level":3},"tunes":{}},{"id":"_m3O8YwM0v","type":"paragraph","data":{"text":"Компилятор TypeScript способен находить больше ошибок, чем JavaScript. Если среда разработки настроена корректно, то он будет находить ошибки на лету, включая проблемы с типами."}},{"id":"4987b3fb-5448-4d33-ba66-9a2ef54af0c6","type":"banner-blank","data":{}},{"id":"O3hkxvoMw0","type":"paragraph","data":{"text":"Рассмотрим 2 примера на JS и TS:"}},{"id":"L11DKYaz87","type":"code","data":{"code":"// JavaScript без типизации\nfunction add(a, b) {\n return a + b;\n}\nconsole.log(add(5, \"3\")); // \"53\" вместо 8\n\n// TypeScript с типизацией\nfunction add(a: number, b: number): number {\n return a + b;\n}\n// add(5, \"3\") вызовет ошибку при компиляции","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"B-z0OmrzB0","type":"paragraph","data":{"text":"В выводе с JS после отладки мы получим 53, хотя должно быть 8. Из-за ошибки с типизацией переменной b, среда, скорее всего, не подсветит эту проблему, консоль отладки тоже явно на неё не укажет."}},{"id":"M5nGKIq3Ih","type":"paragraph","data":{"text":"В пример с TS мы увидим ошибку ещё до отладки, сразу после ввода кода:"}},{"id":"MKYPTO6SjT","type":"image","data":{"alt":"","title":"","caption":"Подсветка ошибок в TypeScript и JavaScript","file":{"url":"https://media.tproger.ru/user-uploads/105039/2025-03-12/cc505158-787a-4789-9622-bdd28cd8b9a9.jpg","id":47180},"stretched":false,"withBackground":false,"withBorder":false,"width":1289,"height":288,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/105039/2025-03-12/cc505158-787a-4789-9622-bdd28cd8b9a9.jpg","alt":"Эпоха TypeScript: почему JavaScript без строгой типизации умирает? Или нет? 1","dimensions":{"width":1289,"height":288},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/pZ0gC-Nr7vB0zoXAcxBeGsEJ5vUNDzGeAvVX-6ptdQ8/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/W0aG7G6mGbMN3U5OnT7A-sJeGBq19Q8lMmoUVt58IeM/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/wogWRys5YPJGHmGiGbx9Q5d5ynGwVbiS1DG14oUVNMU/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/NsEjW87AmAygnyWDjS4ole3BSfGP-CtUsN1m3FbqVDk/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/43eg9cPqGytIQSxVVbYzYsr1D-xzH8rSUCMZYOwVG9g/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/fBmOhtMC00vu8jE86Hcn2SgwneJTidDwri1smBqW5LE/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/1hqImgz1nyDZ0g3Xph2-WKtXLEHPft7BEOvpP9WhHCE/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/c2oUQSS6R1Ab7Wa_iZF26uo1fFrk8LQ1UVYgu0bPBDA/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi9jYzUwNTE1OC03ODdhLTQ3ODktOTYyMi1iZGQyOGNkOGI5YTkuanBn","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"s81t_NLym-","type":"paragraph","data":{"text":"Но даже если по каким-то причинам IDE её не подсветит, мы обнаружим проблему при отладке:"}},{"id":"jTvrm73dIk","type":"image","data":{"alt":"","title":"","caption":"Вывод ошибки в отладке TypeScript","file":{"url":"https://media.tproger.ru/user-uploads/105039/2025-03-12/0b298270-c056-4d3d-91a9-7b206d4a2d1d.jpg","id":47181},"stretched":false,"withBackground":false,"withBorder":false,"width":760,"height":312,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/105039/2025-03-12/0b298270-c056-4d3d-91a9-7b206d4a2d1d.jpg","alt":"Эпоха TypeScript: почему JavaScript без строгой типизации умирает? Или нет? 2","dimensions":{"width":760,"height":312},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/kZP0irXWBFI6LcHiTwRb9eLRbRAZTClSebnQIOpC7RA/rs:fill:760:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":760},{"url":"https://tproger.ru/signed_image/SkBmWU_vFCAp6IW3PovZOxyauUrjbbJBTDabW3BiEpk/rs:fill:1520:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":1520},{"url":"https://tproger.ru/signed_image/eW8BjmpY2a5ZjP_NaakhE9mblOM_3cpk-mYpxnO6AD0/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/SAjFs6Mq97sOkMKm_7DNEMP7xurxEVn6IIwTsKTfvY0/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/mgvMoBwZgTMTwaFOD9bH2LrpeNMHbSue8_Do_oY1RzI/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/svK0BfqimUghuB_gDm7sZpCfJpFdXNcgbzmmMZbB9fA/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/jo6l_pvxUNLTT2_mlOvQG_Q339DhrhXAUKIVBYNLDb8/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/gKpz0_E3FUzU_CHYn5G3ukXzAKfFccC0IxsDfdWchfo/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDUwMzkvMjAyNS0wMy0xMi8wYjI5ODI3MC1jMDU2LTRkM2QtOTFhOS03YjIwNmQ0YTJkMWQuanBn","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"760px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"760px"},{"media":"(min-width: 961px)","size":"760px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"Ew9cPorJLF","type":"paragraph","data":{"text":"Статическая типизация — одна из сильных сторон TypeScript, которая упрощает поддержку проектов после их выпуска. "}},{"id":"6rO2Zfrb8t","type":"paragraph","data":{"text":"Нам проще избежать ошибок, связанных с опечатками в именах свойств, вызовами методов с null объектами, передачей аргументов неправильного типа, отсутствием обработки возможных состояний данных. Если мы будем делать рефакторинг, то компилятор быстро подсветит места в коде, которые стоит обновить."}},{"id":"9vBCO5QKnq","type":"header3","data":{"text":"Лучшее понимание кода разработчиками","level":3},"tunes":{}},{"id":"0phtHAutJx","type":"paragraph","data":{"text":"Также статическая типизация в TypeScript помогает лучше понять код. Мы можем видеть:"}},{"id":"ovyFXgMf3x","type":"list","data":{"style":"unordered","items":["Какие параметры принимает функция и какого они типа.","Что функция возвращает.","Какие свойства имеет объект.","Какие значения может принимать переменная."]}},{"id":"LLGxFmcbJy","type":"paragraph","data":{"text":"Это удобно при работе с большими проектами, где над одним кодом работают крупные команды."}},{"id":"Qlg0HKeREk","type":"blockquote","data":{"text":"TypeScript позволяет писать поддерживаемый и самодокументированный код, если команда разработки будет правильно использовать этот язык — не злоупотреблять any типом, создавать понятные интерфейсы, писать сигнатуру методов и их возвращаемый тип и т. д. В JavaScript это сделать значительно труднее, если не невозможно. Но эти вещи упрощают поддержку и увеличивают скорость отладки приложения.

Сложно представить большой и сложный проект без TypeScript — сегодня это стандарт. Он помогает избежать простых, но очень коварных ошибок, например, передача неправильного типа данных в метод — ошибку увидите сразу. В целом, в таких вещах можно отметить быстрый цикл обратной связи, так как компилятор сразу сообщит о проблеме, и код, который мог бы работать неправильно, не дойдёт до продакшена.","author":"Александр Миранков","authorJob":"Ведущий программист (компания под NDA)","quoteMark":true,"withBorder":false,"fullWidth":false}},{"id":"dVnjl0k94L","type":"blockquote","data":{"text":"Сначала кажется, что TypeScript увеличивает время разработки и неспроста: приходится писать дополнительный код под описание типов, интерфейсов и так далее. Но программирование на TypeScript — это игра вдолгую: в дальнейшем все преимущества раскрываются. Некоторые ошибки без TypeScript неочевидны, и могут обнаружиться уже на этапе продакшена в флоу с реальным пользователем, или в лучшем случае на этапе тестирования. ","author":"Андрей Рик","authorJob":"Senior fullstack-разработчик","quoteMark":true,"withBorder":false,"fullWidth":false}},{"id":"MA_ybbO4Pg","type":"blockquote","data":{"text":"На одном проекте в моей практике было стандартное правило, которое принимают разработчики, если серьезно относятся к типизации на Typescript. Это запрет на использование типа any. При этом, благодаря линтеру на этапе сборки коммита типа any в коде не было, приходилось все подробно типизировать. В процессе приходили новые разработчики и видели, что мы используем Typescript и все подробно описано, поэтому вопросов по коду у них почти не было.","author":"Константин Лёвушкин","authorJob":"Руководитель отдела фронтенд-разработки компании SimbirSoft","quoteMark":true,"withBorder":false,"fullWidth":false}},{"id":"MUznUTiINA","type":"blockquote","data":{"text":"Одним из ярких примеров стало внедрение TypeScript в разработку нашего фронтенда. Ранее в JavaScript у нас часто возникали проблемы, связанные с неправильными типами данных при передаче между модулями, особенно когда один разработчик писал код, а другой его использовал. В TypeScript строгая типизация и контракты между модулями помогли нам избежать многих таких ошибок. Еще один пример — API-интеграции. В JavaScript легко передать не тот объект или пропустить обязательное поле, что приводит к неожиданным багам в продакшене. С TypeScript мы смогли использовать интерфейсы и автоматические проверки.","author":"Владислав Скворцов","authorJob":"Топ-менеджер финансово технологической компании Нумизмат","quoteMark":true,"withBorder":false,"fullWidth":false}},{"id":"Hi7woVE_nH","type":"header2","data":{"text":"Совместимость TypeScript с экосистемой JS","level":2},"tunes":{}},{"id":"xovyxzOFOO","type":"paragraph","data":{"text":"Многие популярные библиотеки и фреймворки поддерживают TypeScript. Например, можно смело кодить в React, Angular, Vue. Любой валидный JS код, в большинстве случаев, валиден и для TypeScript. Достигается это за счёт следующих «фишек»:"}},{"id":"cLOz-WjS_y","type":"paragraph","data":{"text":"Тип any. Это универсальный тип данных, он отключает проверку типов в TypeScript. С одной стороны, этот подход немного неудобный, так как лишает разработчиков преимуществ статической типизации. С другой стороны, бывают случаи, когда это необходимо."}},{"id":"eH8ANOWS31","type":"code","data":{"code":"async function fetchData(url: string): Promise<any> {\n return (await fetch(url)).json();\n}\nconst data = await fetchData(\"api.example.com\");\nconsole.log(data.user.name); // TS молчит, но может упасть в рантайме","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Kz1R8apjuB","type":"paragraph","data":{"text":"В этом примере функция берёт данные с сайта (API) и говорит TypeScript: «Не проверяй, что внутри, я сам разберусь с помощью any». Потом мы пишем data.user.name, и TS не ругается, даже если там нет user или name."}},{"id":"aOxaEZktw2","type":"paragraph","data":{"text":"С одной стороны, any — это «костыль», который сводит на нет смысл TS, но с другой — он бывает полезен, например, при работе с плохо типизированными API."}},{"id":"LiX4vPH3FC","type":"paragraph","data":{"text":"Пакеты @types. Допустим, нам надо импортировать JS библиотеку в TypeScript код. Но эта библиотека не поддерживает TypeScript из коробки. Вариант с типом any нам не подходит, так как мы можем получить много ошибок. В таких случаях подойдёт @types."}},{"id":"5JBNnSJA4l","type":"paragraph","data":{"text":"Это обычные npm-пакеты из DefinitelyTyped. С их помощью мы получаем доступ к репозиторию, в котором хранятся файлы типов (.d.ts). В них прописаны типы данных для объектов, переменных и иных структур JS библиотек. С помощью этих файлов наш TS код сможет «переварить» JavaScript без ущерба для типизации."}},{"id":"ea70b75d-99d8-4263-84cc-d20ec1f1850f","type":"banner-blank","data":{}},{"id":"2g3DXvNTF4","type":"paragraph","data":{"text":"На февраль 2025 года в DefinitelyTyped доступны типы для более чем 8 тыс. библиотек, что покрывает подавляющее большинство популярных npm-пакетов."}},{"id":"Lh05FkdoWs","type":"paragraph","data":{"text":"Пример установки пакета для библиотеки Lodash:"}},{"id":"TwcjsRjQhs","type":"code","data":{"code":"npm install --save-dev @types/lodash","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Rhb-nW0U62","type":"paragraph","data":{"text":"Файлы типов (.d.ts). Если мы используем какую-то старую JS библиотеку, она не поддерживает TypeScript и для неё нет файлов типов (.d.ts), мы можем прописать их вручную. Пример:"}},{"id":"hiKIkXC1Gz","type":"code","data":{"code":"declare module 'old-lib' {\n export function doMagic(input: string): number;\n}\n\n// main.ts\nimport { doMagic } from 'old-lib';\nconst result = doMagic(\"test\"); // TS знает, что это number","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"0DkRPAsv4n","type":"paragraph","data":{"text":"Мы сделали файл .d.ts, чтобы рассказать TypeScript, что старая библиотека old-lib имеет функцию doMagic, которая берёт строку и возвращает число. Теперь, когда мы пишем doMagic('test'), TS понимает, что результат — это число, и не даёт нам случайно использовать его как строку."}},{"id":"Pnqbgxzcf4","type":"paragraph","data":{"text":"Файлы типов (.d.ts) не добавляют исполняемый код, а лишь описывают структуру библиотеки для компилятора TypeScript. Они как переводчик с русского на английский, который подсказывает правильные артикли."}},{"id":"9PP0w7Uqg0","type":"blockquote","data":{"text":"TypeScript создавался с прицелом на полную совместимость с JavaScript, так что серьёзных проблем обычно не бывает. За последние пару лет я сталкивался с трудностями только в тех случаях, когда использовались старые библиотеки без типизации. Например, однажды пришлось подключить устаревший пакет, у которого не было деклараций типов. Мы решили это, написав минимальный `.d.ts` файл вручную — заняло полчаса. Для современных и популярных библиотек таких проблем не бывает — как правило, у всех есть поддержка TypeScript из коробки.","author":"Алексей Каньков","authorJob":"Senior Backend Developer в компании Revizto","quoteMark":true,"withBorder":false,"fullWidth":false}},{"id":"URtWywoWVN","type":"header2","data":{"text":"Недостатки TypeScript","level":2},"tunes":{}},{"id":"5ffu1mNngy","type":"header3","data":{"text":"Замедляет разработку","level":3},"tunes":{}},{"id":"-vAoZ739eH","type":"paragraph","data":{"text":"Когда мы пишем код на TypeScript, то вынуждены явно прописывать типы и исправлять большее количество ошибок, чем при разработке на чистом JS. Это замедляет процесс разработки. "}},{"id":"YOqjyud2eb","type":"paragraph","data":{"text":"Также не у всех JS библиотек есть встроенные типы TypeScript, иногда их приходится прописывать вручную, поэтому мы тратим время."}},{"id":"wuVOCY0TdV","type":"paragraph","data":{"text":"Справедливости ради, этот недостаток окупается со временем, потому что у нас будет меньше критических ошибок при поддержке проекта и внесении новых изменений."}},{"id":"uePfmWN2Uo","type":"header3","data":{"text":"Избыточен для небольших проектов","level":3},"tunes":{}},{"id":"fzgwsXdHl1","type":"paragraph","data":{"text":"Преимущества TypeScript актуальны для крупных продуктов, где работает команда разработчиков и много запутанного кода. Если мы пишем какой-то свой небольшой проект, например, одностраничный сайт, то у нас будет не так много объектов, классов, переменных и сложных структур. Можно написать это всё на TypeScript, чтобы упростить поддержку, но это замедлит разработку, плюс здесь можно обойтись и стандартными инструментами JS."}},{"id":"2ioNnAKvH6","type":"header3","data":{"text":"Сложная кривая обучения для новичков","level":3},"tunes":{}},{"id":"Cu0G-YadeK","type":"paragraph","data":{"text":"TypeScript хоть и надстройка над JavaScript, но у него другой синтаксис. Здесь мы сталкиваемся со строгой типизацией, интерфейсами, обобщениями, модификаторами доступа и прочими страшными абстракциями. "}},{"id":"Y4nqUQ3LrE","type":"hint","data":{"text":"Эпоха TypeScript не означает конец JavaScript — скорее, это новый этап в его эволюции. Динамическая типизация хороша для старта, но в сложных системах без строгих типов не обойтись. TypeScript становится всё популярнее, и это не просто хайп: он реально помогает избегать ошибок и ускоряет разработку в долгосрочной перспективе. Его точно стоит добавить в свой стек.","fullWidth":true}}],"version":"2.25.0"}

Ошибка в настройках сайта