{"id":64471,"date":"2024-05-31T04:55:59","date_gmt":"2024-05-31T01:25:59","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/"},"modified":"2024-05-31T04:55:59","modified_gmt":"2024-05-31T01:25:59","slug":"thoughts-about-solid-the-letter-i-3gp7","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/","title":{"rendered":"\u0627\u0641\u06a9\u0627\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f SOLID &#8211; \u062d\u0631\u0641 &#8220;I&#8221;"},"content":{"rendered":"<div data-article-id=\"1850723\" id=\"article-body\">\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u067e\u0646\u062c\u0645 \u0627\u0632 \u062a\u0623\u0645\u0644\u0627\u062a \u0645\u0646\u060c \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u062e\u0641\u0641 SOLID\u060c \u0628\u0627 \u062d\u0631\u0641 &#8220;I&#8221; \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645.  \u0645\u0646 \u0627\u0632 TypeScript \u062f\u0631 \u0645\u062b\u0627\u0644 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.<\/p>\n<hr\/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D8%AF%D8%B1_%D8%A7%DB%8C%D9%86_%D9%85%D9%82%D8%A7%D9%84%D9%87\" >\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D8%A7%D8%B5%D9%84_%D8%AC%D8%AF%D8%A7%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B1%D8%A7%D8%A8%D8%B7\" >\u0627\u0635\u0644 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D9%85%D8%AB%D8%A7%D9%84_%D8%A7%D9%86%D8%AA%D8%B2%D8%A7%D8%B9%DB%8C\" >\u0645\u062b\u0627\u0644 \u0627\u0646\u062a\u0632\u0627\u0639\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D9%85%D8%AB%D8%A7%D9%84_%D9%81%D9%86%DB%8C_Front-End\" >\u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Front-End)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D9%85%D8%AB%D8%A7%D9%84_%D9%81%D9%86%DB%8C_Back-End\" >\u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Back-End)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D9%85%D8%AB%D8%A7%D9%84_%D8%B4%D8%AE%D8%B5%DB%8C\" >\u0645\u062b\u0627\u0644 \u0634\u062e\u0635\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D9%85%D8%AB%D8%A7%D9%84_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\" >\u0645\u062b\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%D9%87%D8%A7\" >\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/thoughts-about-solid-the-letter-i-3gp7\/#%D8%A7%D9%81%DA%A9%D8%A7%D8%B1_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\" >\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%A7%DB%8C%D9%86_%D9%85%D9%82%D8%A7%D9%84%D9%87\"><\/span>\n<p>  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0635\u0644 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637<br \/>\u0645\u062b\u0627\u0644 \u0627\u0646\u062a\u0632\u0627\u0639\u06cc<br \/>\u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Front-End)<br \/>\u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Back-End)<br \/>\u0645\u062b\u0627\u0644 \u0634\u062e\u0635\u06cc<br \/>\u0645\u062b\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<br \/>\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627<br \/>\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B5%D9%84_%D8%AC%D8%AF%D8%A7%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B1%D8%A7%D8%A8%D8%B7\"><\/span>\n<p>  \u0627\u0635\u0644 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u06cc\u0646 \u0648\u0627\u0642\u0639\u06cc\u062a \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0635\u0644 \u0627\u0633\u062a <strong>\u062a\u0646\u0647\u0627 \u0627\u0635\u0644 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0631\u0627\u0628\u0637 \u0647\u0627\u060c \u0646\u0647 \u06a9\u0644\u0627\u0633 \u0647\u0627<\/strong>.  \u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u06cc \u0631\u0648\u062f \u06a9\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u0647 \u0627\u06cc\u0646 \u062a\u0641\u0627\u0648\u062a \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u06cc\u06a9 \u062e\u0644\u0627\u0635\u0647 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a: \u0631\u0627\u0628\u0637 \u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0627\u06cc\u062f \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0635\u0644 \u062a\u0641\u06a9\u06cc\u06a9 \u0648\u0627\u0633\u0637 \u0627\u06cc\u0646 \u0631\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <strong>\u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0646\u0628\u0627\u06cc\u062f \u0628\u0647 \u0631\u0648\u0634 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u062f \u0648\u0627\u0628\u0633\u062a\u0647 \u0628\u0627\u0634\u062f<\/strong>\u060c \u0648 \u0622\u0646 \u0634\u062e\u0635 \u0628\u0627\u06cc\u062f \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u062f <strong>\u0686\u0646\u062f\u06cc\u0646 \u0631\u0627\u0628\u0637 \u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0648\u0627\u062d\u062f \u0628\u0627 \u0686\u0646\u062f\u06cc\u0646 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a<\/strong>.<\/p>\n<p>\u062c\u0627\u0644\u0628 \u062a\u0631\u06cc\u0646 \u062c\u0646\u0628\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0627\u0635\u0644 \u0628\u0627 \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644 \u0627\u0648\u0644 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f. <strong>\u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0648\u0627\u062d\u062f<\/strong>.  \u0647\u0631 \u062f\u0648 \u0627\u06cc\u062f\u0647 \u062a\u0641\u06a9\u06cc\u06a9 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0647\u0627 \u0631\u0627 \u062a\u0631\u0648\u06cc\u062c \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062a\u0648\u0633\u0639\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u062a\u0636\u0645\u06cc\u0646 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u06cc \u0637\u0628\u0642\u0627\u062a\u06cc \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u06cc\u0627 \u0631\u0627\u0628\u0637 \u0628\u0627 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f \u0637\u0628\u06cc\u0639\u062a\u0627\u064b \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 \u0627\u0633\u062a\u060c \u0632\u06cc\u0631\u0627 \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0627\u0645\u0646\u0627\u0633\u0628 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0646\u0627\u0645\u0637\u0644\u0648\u0628 \u0632\u06cc\u0627\u062f\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc\u06cc \u0628\u0641\u0647\u0645\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0635\u0644 \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0648 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_%D8%A7%D9%86%D8%AA%D8%B2%D8%A7%D8%B9%DB%8C\"><\/span>\n<p>  \u0645\u062b\u0627\u0644 \u0627\u0646\u062a\u0632\u0627\u0639\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645 <strong>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647<\/strong> \u0645\u062b\u0627\u0644.  \u0627\u06cc\u0646 \u0628\u0627\u0631 \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u06a9\u062a\u0627\u0628 \u0628\u0644\u06a9\u0647 \u062f\u06cc \u0648\u06cc \u062f\u06cc \u0648 \u0628\u0644\u0648\u0631\u06cc \u0641\u06cc\u0644\u0645 \u0648 \u0633\u0631\u06cc\u0627\u0644 \u0646\u06cc\u0632 \u062f\u0627\u0631\u062f.  \u062e\u0648\u0628\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648:<\/p>\n<ul>\n<li>\u0647\u0631 \u06cc\u06a9 <strong>\u0645\u0648\u0631\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647<\/strong> \u0628\u0627\u06cc\u062f \u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u0634\u0648\u062f\u061b<\/li>\n<li>\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0646\u0627\u0645 \u0647\u0631 \u0645\u0648\u0631\u062f \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0631\u0648\u0634 \u0628\u062f\u0627\u0646\u06cc\u0645.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u06a9\u062a\u0627\u0628 \u0647\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0639\u062f\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u0631\u0627 \u0628\u062f\u0627\u0646\u06cc\u0645.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0641\u06cc\u0644\u0645\u200c\u0647\u0627 \u0648 \u0633\u0631\u06cc\u0627\u0644\u200c\u0647\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u062f\u0627\u0646\u06cc\u0645.<\/li>\n<\/ul>\n<p><strong>\ud83d\udd34\u0627\u062c\u0631\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Let's imagine an interface that requires the implementation of three methods.<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">LibraryItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">getName<\/span><span class=\"p\">():<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ For both books and series\/movies, we want to know the item's name.<\/span>\n  <span class=\"nf\">getPages<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Only for books, how many pages it has.<\/span>\n  <span class=\"nf\">getDuration<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Only for series and movies, what the duration is in minutes.<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Now, let's create our Book class, implementing the LibraryItem interface.<\/span>\n<span class=\"c1\">\/\/ This will force us to comply with what the LibraryItem contains. Let's follow along.<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">Book<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">LibraryItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">pages<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"c1\">\/\/ No problems with this method.<\/span>\n  <span class=\"nf\">getName<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ No problems with this method.<\/span>\n  <span class=\"nf\">getPages<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pages<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">getDuration<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ PRINCIPLE VIOLATION: The getDuration method, although it belongs to library items, <\/span>\n    <span class=\"c1\">\/\/ doesn't make sense in the context of books and will not be implemented. <\/span>\n    <span class=\"c1\">\/\/ Therefore, books are forced to depend on and implement a method they don't use.<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Books do not have a duration in minutes<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">DVD<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">LibraryItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">duration<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"c1\">\/\/ No problems with this method.<\/span>\n  <span class=\"nf\">getName<\/span><span class=\"p\">():<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ PRINCIPLE VIOLATION: Same observation as the above item, but now from the perspective <\/span>\n    <span class=\"c1\">\/\/ of movies and series, which don't have a number of pages but are forced to implement.<\/span>\n  <span class=\"nf\">getPages<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">DVDs do not have a number of pages<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ No problems with this method.<\/span>\n  <span class=\"nf\">getDuration<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">duration<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\ud83e\udca2 \u0627\u062c\u0631\u0627\u06cc \u0635\u062d\u06cc\u062d<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ It is preferable to segregate the interfaces. It is better to have multiple interfaces, each with its own responsibility,<\/span>\n<span class=\"c1\">\/\/ than a single one that forces classes to implement methods they don't need.<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">LibraryItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">getName<\/span><span class=\"p\">():<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Common method for all.<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">BookItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">getPages<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Specific method for books.<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">DVDItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">getDuration<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Specific method for DVDs.<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Now, each class implements only what it uses.<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">Book<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">LibraryItem<\/span><span class=\"p\">,<\/span> <span class=\"nx\">BookItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">pages<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">getName<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">getPages<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pages<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">DVD<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">LibraryItem<\/span><span class=\"p\">,<\/span> <span class=\"nx\">DVDItem<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">duration<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">getName<\/span><span class=\"p\">():<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">getDuration<\/span><span class=\"p\">():<\/span> <span class=\"kr\">number<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">duration<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_%D9%81%D9%86%DB%8C_Front-End\"><\/span>\n<p>  \u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Front-End)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f 3 \u0646\u0648\u0639 \u062f\u06a9\u0645\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u0645: <strong>\u062f\u06a9\u0645\u0647 \u0627\u0635\u0644\u06cc<\/strong>\u060c <strong>IconButton<\/strong> \u0648 <strong>\u062f\u06a9\u0645\u0647 \u062a\u0639\u0648\u06cc\u0636<\/strong>.  \u0627\u06af\u0631 \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u0628\u0647 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0627\u0635\u0644\u06cc \u0648\u0627\u0628\u0633\u062a\u0647 \u0628\u0627\u0634\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0634\u06a9\u0644\u0627\u062a\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>\ud83d\udd34\u0627\u062c\u0631\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Interface too generic for the various types of buttons that exist.<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Method to render the button.<\/span>\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Method to set the button's label.<\/span>\n  <span class=\"nf\">setIcon<\/span><span class=\"p\">(<\/span><span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Method to associate an icon with the button.<\/span>\n  <span class=\"nf\">toggle<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Method for toggle buttons, to switch on\/off.<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">PrimaryButton<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Rendering button...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">label<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ PRINCIPLE VIOLATION: PrimaryButton doesn't support icons but is forced to implement the method.<\/span>\n  <span class=\"nf\">setIcon<\/span><span class=\"p\">(<\/span><span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">This button does not support icons<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ PRINCIPLE VIOLATION: Same observation as above.<\/span>\n  <span class=\"nf\">toggle<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">This button does not support toggle<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ PRINCIPLE VIOLATION: Below, we have two more classes, IconButton and ToggleButton, which exemplify the opposite of PrimaryButton.<\/span>\n<span class=\"c1\">\/\/ Each implements its respective method, setIcon and toggle, but is also forced to implement methods they<\/span>\n<span class=\"c1\">\/\/ don't use.<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">IconButton<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Rendering button...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">icon<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">label<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setIcon<\/span><span class=\"p\">(<\/span><span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">icon<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">icon<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">toggle<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">This button does not support toggle<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">ToggleButton<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">state<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Rendering button...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">label<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setIcon<\/span><span class=\"p\">(<\/span><span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">This button does not support icons<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">toggle<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\ud83e\udca2 \u0627\u062c\u0631\u0627\u06cc \u0635\u062d\u06cc\u062d<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ The simplicity and elegance of the solution lie in segregating into multiple interfaces, unifying in the<\/span>\n<span class=\"c1\">\/\/ Button interface what is truly generic.<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">WithIcon<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">setIcon<\/span><span class=\"p\">(<\/span><span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">WithToggle<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">toggle<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Classes now only implement the interfaces they need.<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">PrimaryButton<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Rendering button...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">label<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">IconButton<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Button<\/span><span class=\"p\">,<\/span> <span class=\"nx\">WithIcon<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Rendering button...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">icon<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">label<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setIcon<\/span><span class=\"p\">(<\/span><span class=\"nx\">icon<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">icon<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">icon<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">ToggleButton<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Button<\/span><span class=\"p\">,<\/span> <span class=\"nx\">WithToggle<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"k\">private<\/span> <span class=\"nx\">state<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Rendering button...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setLabel<\/span><span class=\"p\">(<\/span><span class=\"nx\">label<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">label<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">toggle<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_%D9%81%D9%86%DB%8C_Back-End\"><\/span>\n<p>  \u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Back-End)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u0646 \u0641\u0631\u0636 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0631\u0627\u06a9\u0646\u0634\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0631\u0648\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u0631\u0627\u0628\u0637\u0647\u200c\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f \u0627\u0645\u0627 \u0631\u0648\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u063a\u06cc\u0631\u0631\u0627\u0628\u0637\u0647\u200c\u0627\u06cc \u0646\u0647.  \u0645\u0627 \u062a\u0635\u062f\u06cc\u0642 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u062d\u0642\u06cc\u0642\u062a \u0645\u0637\u0644\u0642 \u0646\u06cc\u0633\u062a (\u0628\u0647 \u0634\u062f\u062a \u0628\u0647 \u0645\u062f\u0644 \u0641\u0631\u0648\u0634\u0646\u062f\u0647 \u0648 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f)\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0622\u0645\u0648\u0632\u0634\u06cc\u060c \u0641\u0631\u0636 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0646\u06cc\u0646 \u0627\u0633\u062a.<\/p>\n<p><strong>\ud83d\udd34\u0627\u062c\u0631\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Generic interface for databases, implementing connections, queries, and transactions.<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Database<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">connect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">disconnect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">runQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">unknown<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">startTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">commitTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">rollbackTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ For relational databases, all implementations work.<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">RelationalDatabase<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Database<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">connect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully connected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">disconnect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully disconnected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">runQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">unknown<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Executing query: <\/span><span class=\"p\">${<\/span><span class=\"nx\">query<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span> <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">startTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Transaction - Started<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">commitTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Transaction - Committed<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">rollbackTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Transaction - Rolled back<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">NonRelationalDatabase<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Database<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">connect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully connected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">disconnect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully disconnected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">runQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">unknown<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Executing query: <\/span><span class=\"p\">${<\/span><span class=\"nx\">query<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span> <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ PRINCIPLE VIOLATION: If transactions don't work for all database types, why is it part of the generic interface, forcing classes to implement it?<\/span>\n\n  <span class=\"nf\">startTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Non-relational databases do not support transactions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">commitTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Non-relational databases do not support transactions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">rollbackTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Non-relational databases do not support transactions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\ud83e\udca2 \u0627\u062c\u0631\u0627\u06cc \u0635\u062d\u06cc\u062d<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ We an still have a generic interface, but we segregate what is considered specific.<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Database<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">connect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">disconnect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">DatabaseQueries<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">runQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">unknown<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">DatabaseTransactions<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">startTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">commitTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nf\">rollbackTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">RelationalDatabase<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Database<\/span><span class=\"p\">,<\/span> <span class=\"nx\">DatabaseQueries<\/span><span class=\"p\">,<\/span> <span class=\"nx\">DatabaseTransactions<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">connect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully connected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">disconnect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully disconnected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">runQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">unknown<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Executing query: <\/span><span class=\"p\">${<\/span><span class=\"nx\">query<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span> <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">startTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Transaction - Started<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">commitTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Transaction - Committed<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">rollbackTransaction<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Transaction - Rolled back<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Now, our non-relational database only implements what makes sense.<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">NonRelationalDatabase<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Database<\/span><span class=\"p\">,<\/span> <span class=\"nx\">DatabaseQueries<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">connect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully connected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">disconnect<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Successfully disconnected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">runQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">unknown<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Executing query: <\/span><span class=\"p\">${<\/span><span class=\"nx\">query<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span> <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_%D8%B4%D8%AE%D8%B5%DB%8C\"><\/span>\n<p>  \u0645\u062b\u0627\u0644 \u0634\u062e\u0635\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06a9\u0647 \u062f\u0631 <strong>\u06a9\u0627\u0631\u062a \u0633\u0648\u067e\u0631 \u0645\u0627\u0631\u06cc\u0648<\/strong>\u060c \u0645\u0648\u0627\u0631\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u062e\u062a\u0635 \u0634\u062e\u0635\u06cc\u062a \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0627\u0633\u062a &#8211; \u0631\u0641\u062a\u0627\u0631\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u0634\u06a9\u0648\u06a9 \u0628\u0627\u0634\u062f\u060c \u0627\u0645\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0631 \u0622\u0646 \u0646\u06cc\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0647 \u0627\u0635\u0644 \u067e\u0627\u06cc\u0628\u0646\u062f \u0628\u0627\u0634\u06cc\u0645\u061f<\/p>\n<p><strong>\ud83d\udd34\u0627\u062c\u0631\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">Items<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwShell<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Item that any character can have.<\/span>\n  <span class=\"nf\">throwFire<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Exclusive item of Bowser, being a fireball.<\/span>\n  <span class=\"nf\">throwMushroom<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Exclusive item of Peach (at the time Princess Toadstool) and Toad.<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ PRINCIPLE VIOLATION: We will encounter several errors in each of the specific scenarios.<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">Mario<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Items<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwShell<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Throwing \"Shell\" item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">throwFire<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Mario does not have access to this item.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">throwMushroom<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Mario does not have access to this item.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">Bowser<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Items<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwShell<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Throwing \"Shell\" item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">throwFire<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Throwing \"Fire\" item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">throwMushroom<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Bowser does not have access to this item.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">Princess<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">Items<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwShell<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Throwing \"Shell\" item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">throwFire<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Princess does not have access to this item.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">throwMushroom<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Throwing \"Mushroom\" item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\ud83e\udca2 \u0627\u062c\u0631\u0627\u06cc \u0635\u062d\u06cc\u062d<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ We can split our single interface into multiple interfaces, separating what's generic from what's specific.<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">CommonItems<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwShell<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">FireSpecialItems<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwFire<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">MushroomSpecialItems<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">throwMushroom<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\"><\/span>\n<p>  \u0645\u062b\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u0645 <strong>\u06cc\u06a9 \u0631\u0627\u0628\u0637 \u067e\u0631\u062f\u0627\u0632\u0634\u06af\u0631 \u062f\u0627\u062f\u0647<\/strong>.  \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0647\u0631 \u062f\u0648 \u0641\u0627\u06cc\u0644 JSON \u0648 CSV \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc \u062e\u0627\u0635 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u0646\u062f.  \u0627\u06af\u0631 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0635\u0644 \u0631\u0627 \u0646\u0642\u0636 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>\ud83d\udd34\u0627\u062c\u0631\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ In this interface, we define a function that processes data.<\/span>\n<span class=\"kd\">type<\/span> <span class=\"nx\">DataProcessor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span>\n  <span class=\"nx\">data<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ The data to be processed.<\/span>\n  <span class=\"nx\">jsonToObject<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Only for JSON, indicating whether to convert to object.<\/span>\n  <span class=\"nx\">csvSeparator<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"c1\">\/\/ Only for CSV, indicating the column separator.<\/span>\n<span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[];<\/span>\n\n<span class=\"c1\">\/\/ PRINCIPLE VIOLATION: Every function defined based on this interface will be dependent on<\/span>\n<span class=\"c1\">\/\/ parameters that it may not need. A JSON processor, or a CSV processor, will need to<\/span>\n<span class=\"c1\">\/\/ implement those parameters regardless.<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">jsonProcessor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DataProcessor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">jsonToObject<\/span><span class=\"p\">,<\/span> <span class=\"nx\">csvSeparator<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">validateJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">jsonToObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">transformJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">result<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">csvProcessor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DataProcessor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">jsonToObject<\/span><span class=\"p\">,<\/span> <span class=\"nx\">csvSeparator<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">validateJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">transformCSV<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">csvSeparator<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">result<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ Note that function calls are forced to pass unnecessary parameters.<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">json<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">jsonProcessor<\/span><span class=\"p\">(<\/span><span class=\"nx\">jsonData<\/span><span class=\"p\">,<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">csv<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">csvProcessor<\/span><span class=\"p\">(<\/span><span class=\"nx\">csvData<\/span><span class=\"p\">,<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">,<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\ud83e\udca2 \u0627\u062c\u0631\u0627\u06cc \u0635\u062d\u06cc\u062d<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ With functional programming, there are several ways to approach this solution.<\/span>\n<span class=\"c1\">\/\/ Here, I chose to segregate the interfaces into option objects.<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">DataProcessorJSONOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">toObject<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">DataProcessorCSVOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">separator<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">DataProcessor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span>\n  <span class=\"nx\">data<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n  <span class=\"c1\">\/\/ Now, the second parameter has options for each type, being optional.<\/span>\n  <span class=\"nx\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">json<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">DataProcessorJSONOptions<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">csv<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">DataProcessorCSVOptions<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[];<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">jsonProcessor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DataProcessor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">json<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">validateJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">?.<\/span><span class=\"nx\">toObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">transformJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">result<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">csvProcessor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">DataProcessor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">csv<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">validateJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">transformCSV<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">,<\/span> <span class=\"nx\">csv<\/span><span class=\"p\">?.<\/span><span class=\"nx\">separator<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">result<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ As I mentioned, there are other ways to solve this problem.<\/span>\n<span class=\"c1\">\/\/ This would be a basic approach, using optional parameters.<\/span>\n<span class=\"c1\">\/\/ Another way would be to use Union Types or something similar.<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">json<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">jsonProcessor<\/span><span class=\"p\">(<\/span><span class=\"nx\">jsonData<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">json<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">toObject<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">csv<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">csvProcessor<\/span><span class=\"p\">(<\/span><span class=\"nx\">csvData<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">csv<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">separator<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">,<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%D9%87%D8%A7\"><\/span>\n<p>  \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u0646\u0647\u0627 \u0627\u0635\u0644 \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0647 \u062f\u0631 \u0631\u0627\u0628\u0637 \u0647\u0627\u060c \u0634\u062e\u0635\u0627\u064b \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628\u06cc \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u0645.  \u0645\u0648\u0642\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc \u0646\u0627\u0645\u0637\u0644\u0648\u0628 \u0627\u06cc\u0646 \u0627\u0635\u0644 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062f\u0631 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u06cc\u0627 \u062d\u062a\u06cc \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0639\u062f\u0645 \u0628\u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc \u0633\u0627\u06cc\u0631 \u0627\u0635\u0648\u0644 SOLID &#8211; \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u0645\u060c \u0639\u0645\u062f\u062a\u0627\u064b \u0627\u0648\u0644\u06cc\u060c \u06cc\u0627\u0641\u062a.<\/p>\n<p>\u062a\u0645\u0631\u06cc\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0645\u0648\u062b\u0631 \u0622\u0646\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u0627\u062a \u06a9\u0645\u06a9 \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u067e\u0631\u0633\u06cc\u0645 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0686\u0642\u062f\u0631 \u0639\u0645\u0648\u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0648 \u0631\u0648\u0634 \u0647\u0627 \u0686\u0642\u062f\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0627\u0634\u0646\u062f.  \u0627\u0645\u0631\u0648\u0632\u0647 \u0645\u0627 \u0646\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062e\u06cc\u0644\u06cc \u0628\u0627 \u0622\u0646 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645 <strong>\u0631\u0648\u0634 \u0647\u0627\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc<\/strong>\u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062d\u0627\u0641\u0638\u06cc \u0628\u0631\u0627\u06cc \u0686\u0646\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u0646\u062c\u0631 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0646\u06cc\u0627\u0632 \u0628\u0647 &#8220;\u0646\u0648\u0639 \u0698\u06cc\u0645\u0646\u0627\u0633\u062a\u06cc\u06a9&#8221; \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0631\u0648\u0634 \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%DA%A9%D8%A7%D8%B1_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u062d\u062b \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <strong>\u062a\u0639\u0645\u06cc\u0645<\/strong> \u062f\u0631 \u062c\u0646\u0628\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0647\u0646\u062f\u0633\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u060c \u0648 \u0627\u06cc\u0646 \u0642\u0637\u0639\u0627\u064b \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a &#8211; \u0645\u0634\u06a9\u0644 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0633\u062a\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0634\u062e\u0635 \u0646\u06cc\u0633\u062a \u062e\u0637 \u0645\u0631\u0632\u06cc \u0631\u0627 \u06a9\u062c\u0627 \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f.  \u0627\u06af\u0631 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0639\u0645\u0648\u0645\u06cc \u0628\u062f\u0627\u0646\u06cc\u0645\u060c \u0622\u0646\u200c\u06af\u0627\u0647 \u0622\u0646\u0686\u0647 \u062e\u0627\u0635 \u0627\u0633\u062a\u060c \u062a\u0645\u0627\u0645 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.  \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a\u060c \u0627\u06af\u0631 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u0634\u062e\u0635 \u0628\u0627\u0634\u062f\u060c \u0627\u0646\u0628\u0648\u0647\u06cc \u0627\u0632 \u06a9\u0644\u0627\u0633 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a \u0648 \u0648\u062c\u0648\u062f \u0635\u062d\u06cc\u062d \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u0632 \u062f\u0633\u062a \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u062f\u0647 \u0622\u0644 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0635\u0644 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0627\u0647\u062f\u0627\u0641 \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645: \u0686\u0647 \u0631\u0648\u0634 \u0647\u0627\u06cc\u06cc \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u0634\u062a\u061f  \u062f\u0631 \u0686\u0647 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u0627\u0639\u0645\u0627\u0644 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f\u061f  \u0622\u06cc\u0627 \u06a9\u0644\u0627\u0633 \u0647\u0627 \u0631\u0627 \u0645\u062c\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646\u0647\u0627 \u0645\u0641\u06cc\u062f \u0646\u0628\u0627\u0634\u062f\u061f  \u0628\u0627 \u0634\u0631\u0648\u0639 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0641\u0631\u0648\u0636\u0627\u062a\u060c \u062a\u0634\u062e\u06cc\u0635 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0635\u0644 \u06a9\u0645\u06cc \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u06a9\u0647 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0627 \u0628\u0627\u06cc\u062f <strong>\u0645\u0631\u0627\u0642\u0628 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0641\u0642\u0637 \u0627\u0632 \u0631\u0648\u06cc \u062a\u0639\u0647\u062f \u06a9\u062f \u0627\u06cc\u062c\u0627\u062f \u0646\u06a9\u0646\u06cc\u062f<\/strong>\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0647\u062f\u0641 \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u067e\u0646\u062c\u0645 \u0627\u0632 \u062a\u0623\u0645\u0644\u0627\u062a \u0645\u0646\u060c \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u062e\u0641\u0641 SOLID\u060c \u0628\u0627 \u062d\u0631\u0641 &#8220;I&#8221; \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645. \u0645\u0646 \u0627\u0632 TypeScript \u062f\u0631 \u0645\u062b\u0627\u0644 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0635\u0644 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637\u0645\u062b\u0627\u0644 \u0627\u0646\u062a\u0632\u0627\u0639\u06cc\u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Front-End)\u0645\u062b\u0627\u0644 \u0641\u0646\u06cc (Back-End)\u0645\u062b\u0627\u0644 \u0634\u062e\u0635\u06cc\u0645\u062b\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u0627\u0641\u06a9\u0627\u0631 \u0646\u0647\u0627\u06cc\u06cc \u0627\u0635\u0644 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u06cc\u0646 \u0648\u0627\u0642\u0639\u06cc\u062a \u0627\u0633\u062a \u06a9\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":64472,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-64471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/64471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=64471"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/64471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/64472"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=64471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=64471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=64471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}