{"id":2100,"date":"2021-06-21T12:02:14","date_gmt":"2021-06-21T12:02:14","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2100"},"modified":"2021-06-21T12:02:14","modified_gmt":"2021-06-21T12:02:14","slug":"%d0%bf%d0%b5%d1%80%d0%b5%d0%bf%d0%b8%d1%81%d1%8b%d0%b2%d0%b0%d0%b5%d0%bc-%d1%82%d0%b5%d1%81%d1%82%d0%be%d0%b2%d0%be%d0%b5-%d0%b7%d0%b0%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b4%d0%bb%d1%8f-junior-fronten-2","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2100","title":{"rendered":"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks"},"content":{"rendered":"\n<h2 id=\"podgotovka\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c&nbsp;<a href=\"https:\/\/facebook.github.io\/create-react-app\/docs\/adding-typescript\">Create-react-app TypeScript<\/a>&nbsp;\u0432\u0435\u0440\u0441\u0438\u044e, \u043b\u0438\u0431\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/1-start\">\u043c\u043e\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u0435\u0440\u043e\u043c<\/a>&nbsp;(\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d reach-router)<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/1-start\">\u0441\u0432\u043e\u0439 \u0441\u0442\u0430\u0440\u0442\u0435\u0440<\/a>&nbsp;(\u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u00ab\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u00bb).<\/p>\n\n\n\n<h2 id=\"teoriya-typescript\">\u0422\u0435\u043e\u0440\u0438\u044f TypeScript<\/h2>\n\n\n\n<p>TS \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u00ab\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438\u00bb \u0432 JavaScript, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u0448\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u043e \u0441\u0442\u0440\u043e\u043a\u0430, \u0442\u043e \u0447\u0438\u0441\u043b\u043e, \u0430 \u0442\u043e \u0438 \u0432\u043e\u0432\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442. \u0422\u0430\u043a \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u00ab19\u043c \u0432\u0435\u043a\u0435\u00bb, \u043e\u0434\u043d\u0430\u043a\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0441\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0442\u0438\u043f\u044b (\u0441\u0447\u0438\u0442\u0430\u0439 \u2014 \u043f\u0440\u0430\u0432\u0438\u043b\u0430), \u0442\u043e \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043b\u0435\u0433\u0447\u0435 \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435. \u0414\u0430 \u0438 \u0431\u0430\u0433\u043e\u0432 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n\n\n\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u043d\u043e\u0432\u043e\u0441\u0442\u044c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0442\u0438\u043f:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789<\/td><td>\/\/ \u043d\u0430\u0448\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u044c &#8211; \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 { }\/\/ c \u043f\u043e\u043b\u044f\u043c\u0438export interface INewsItem {&nbsp;&nbsp;id: number; \/\/ id \u043d\u043e\u0432\u043e\u0441\u0442\u0438 &#8211; \u044d\u0442\u043e \u0447\u0438\u0441\u043b\u043e&nbsp;&nbsp;title: string; \/\/ title (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a) &#8211; \u0441\u0442\u0440\u043e\u043a\u0430&nbsp;&nbsp;text: string; \/\/ text (\u0442\u0435\u043a\u0441\u0442 \u043d\u043e\u0432\u043e\u0441\u0442\u0438) &#8211; \u0441\u0442\u0440\u043e\u043a\u0430&nbsp;&nbsp;link: string; \/\/ link (\u0441\u0441\u044b\u043b\u043a\u0430) &#8211; \u0441\u0442\u0440\u043e\u043a\u0430&nbsp;&nbsp;timestamp: Date; \/\/ timestamp (\u0434\u0430\u0442\u0430) &#8211; \u0442\u0438\u043f \u0414\u0430\u0442\u0430 \u0432 js}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u00ab\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435\u00bb \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u00ab\u043d\u043e\u0432\u043e\u0441\u0442\u044c\u00bb. \u0415\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u2014 TypeScript \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617181920<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { INewsItem } from &#8216;..\/models\/news&#8217; \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 &#8220;\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e&#8221;&nbsp;interface INewsItemProps {&nbsp;&nbsp;data: INewsItem; \/\/ \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0437\u0434\u0435\u0441\u044c, \u043d\u0430\u0448 \u043e\u0431\u044a\u0435\u043a\u0442 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0431\u043b\u043e\u043a\u0435 \u0432\u044b\u0448\u0435)}&nbsp;const NewsItem: React.FC&amp;lt;INewsItemProps&amp;gt; = ({&nbsp;&nbsp;data: { id, text, abracadabra }, \/\/ \u0432\u044b\u0442\u0430\u0449\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, id \u0438 text &#8211; \u043e\u043a, abracadabra &#8211; \u043e\u0448\u0438\u0431\u043a\u0430}) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;article&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;{id}&amp;lt;\/div&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;{text}&amp;lt;\/div&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/article&amp;gt;&nbsp;&nbsp;)}&nbsp;export { NewsItem }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\" id=\"attachment_18907\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/mltla_l7jixs0pz75c-1gr2yps-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18907\"\/><figcaption>\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks<\/figcaption><\/figure>\n\n\n\n<p>\u0422\u0430\u043a \u0436\u0435, Visual studio Code \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043f\u043e\u043a\u0430\u0436\u0443\u0442 \u0432\u0430\u043c \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/a8b2rtfeteln_8arcrduzv7yohi-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18908\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/yastatic.net\/safeframe-bundles\/0.80\/1-1-0\/protected\/render.html\n<\/div><\/figure>\n\n\n\n<p>\u041d\u0430\u0433\u043b\u044f\u0434\u043d\u043e, \u0443\u0434\u043e\u0431\u043d\u043e. \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, VS Code \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0435 \u043e\u0448\u0438\u0431\u043a\u0438: \u043d\u0435 \u0437\u0430\u0434\u0430\u043d \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 (\u0442\u043e \u0435\u0441\u0442\u044c, \u0435\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u00ab\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435\u00bb \u043d\u043e\u0432\u043e\u0441\u0442\u0438) \u0438 \u00ab\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f\u00bb. \u041f\u0440\u0438\u0447\u0435\u043c, \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TypeScript \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0431\u043b\u0435\u0434\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0432 VS Code \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u0443 \u0441\u0442\u043e\u043b\u044c \u0442\u0435\u0441\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 TypeScript \u0438 VS Code: \u043e\u0431\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 Microsoft.<\/p>\n\n\n\n<p>\u0427\u0442\u043e \u0435\u0449\u0435 \u043d\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c TypeScript? \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u2014 \u0432\u0441\u0451. TS \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u0439, \u043e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u00ab\u0447\u0442\u043e \u043a \u0447\u0435\u043c\u0443\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789<\/td><td>const NewsItem: React.FC&amp;lt;INewsItemProps&amp;gt; = ({ data: { id, title, text } }) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;article&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;{id.toUpperCase()}&amp;lt;\/div&amp;gt; {\/* \u042d\u0439, \u043f\u0430\u0440\u0435\u043d\u044c, \u0443 &#8216;number&#8217; \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 toUpperCase() *\/}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;{title.toUpperCase()}&amp;lt;\/div&amp;gt; {\/* \u0430 \u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u0435\u0441\u0442\u044c! *\/}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;{text}&amp;lt;\/div&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/article&amp;gt;&nbsp;&nbsp;)}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/o0cviqd0sbydngcldu3gkjr4kty-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18909\"\/><\/figure>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c, TypeScript \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0440\u0443\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u2014&nbsp;<code>toUpperCase<\/code>&nbsp;\u0443 \u0442\u0438\u043f\u0430&nbsp;<code>number<\/code>. \u0410 \u043a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043c\u0435\u0442\u043e\u0434&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/toUpperCase\">toUpperCase()<\/a>&nbsp;\u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0445 \u0442\u0438\u043f\u043e\u0432.<\/p>\n\n\n\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0432\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u043a\u043e\u0431\u043a\u0443 \u0438 \u0432\u0430\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u043a\u0430\u043a\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n\n\n\n<p>\u0418\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u2014 \u0432\u044b \u0441\u0442\u0440\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c \u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u0443\u043b\u0435\u043d\u0435\u043f\u0440\u043e\u0431\u0438\u0432\u0430\u0435\u043c\u0430\u044f. \u041f\u043e\u043c\u0438\u043c\u043e \u0430\u0432\u0442\u043e\u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u043a \u0432\u044b \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043d\u0435\u044f\u0432\u043d\u044b\u043c\u0438 (<code>undefined<\/code>) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n\n\n\n<h2 id=\"praktika\">\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430<\/h2>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tz-webinars\/tree\/tz-1-react-redux-react-router\">\u043f\u0435\u0440\u0432\u043e\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/a>&nbsp;\u043d\u0430&nbsp;<a href=\"https:\/\/maxpfrontend.ru\/perevody\/znakomstvo-s-react-hooks\/\">react-hooks<\/a>&nbsp;+ TypeScript. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e, \u043e\u043f\u0443\u0441\u0442\u0438\u043c&nbsp;<a href=\"https:\/\/maxfarseer.gitbooks.io\/redux-course-ru-v2\/content\/\">Redux<\/a>, \u0438\u043d\u0430\u0447\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u00ab<a href=\"https:\/\/hackmd.io\/s\/BJWYLsmD4\">\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c \u0442\u0437#1<\/a>\u00ab, \u0432\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0435 \u0432\u0441\u0435 \u043e\u0442\u0441\u044e\u0434\u0430.<\/p>\n\n\n\n<h3 id=\"instrumentariy\">\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439<\/h3>\n\n\n\n<p><em>(\u0434\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442&nbsp;<a href=\"https:\/\/code.visualstudio.com\/\">VS Code<\/a>)<\/em><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0430\u043c \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c&nbsp;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode.vscode-typescript-tslint-plugin\">\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 TSLint<\/a>.<\/p>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0444\u0438\u043a\u0441 \u043e\u0448\u0438\u0431\u043e\u043a TSLint \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345<\/td><td>\/\/ \u0432 settings.json visual studio&nbsp;&#8220;editor.codeActionsOnSave&#8221;: {&nbsp;&nbsp;&nbsp;&nbsp;&#8220;source.fixAll.tslint&#8221;: true}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u043d\u044e, \u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0433\u0434\u0435&nbsp;<a href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/settings#_settings-file-locations\">\u043e\u043d\u0438 \u0436\u0438\u0432\u0443\u0442<\/a>&nbsp;\u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u0432\u0430\u0448\u0435\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.<\/p>\n\n\n\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 TSLint \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435, \u043f\u043b\u044e\u0441 \u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043b \u043e\u0434\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112<\/td><td>{&nbsp;&nbsp;&#8220;extends&#8221;: [&#8220;tslint:recommended&#8221;, &#8220;tslint-react&#8221;, &#8220;tslint-config-prettier&#8221;],&nbsp;&nbsp;&#8220;linterOptions&#8221;: {&nbsp;&nbsp;&nbsp;&nbsp;&#8220;exclude&#8221;: [&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8220;node_modules\/**\/*.ts&#8221;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8220;src\/serviceWorker.js&#8221;&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;},&nbsp;&nbsp;&#8220;rules&#8221;: {&nbsp;&nbsp;&nbsp;&nbsp;&#8220;object-literal-sort-keys&#8221;: false \/\/ \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u043e \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043e&nbsp;&nbsp;}}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430!<\/p>\n\n\n\n<h3 id=\"pishem-prilozhenie\">\u041f\u0438\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n\n\n\n<p>\u0411\u0443\u0434\u0435\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u0441 \u0432\u0435\u0449\u0430\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u043f\u043e \u0445\u043e\u0434\u0443 \u043f\u044c\u0435\u0441\u044b. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0435\u0431\u0435&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/1-start\">\u0432\u0435\u0442\u043a\u0443 1-start<\/a>&nbsp;\u0438\u043b\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c \u0432 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u0434\u0435 \u0441 \u043c\u043e\u0438\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n\n\n\n<p>\u0412\u0441\u0435 react type script \u0444\u0430\u0439\u043b\u044b \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435&nbsp;<strong>.tsx<\/strong>.<\/p>\n\n\n\n<h4 id=\"chto-interesnogo-est-v-startovom-shablone\">\u0427\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0432 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435?<\/h4>\n\n\n\n<ul><li>pre-commit hook (\u043c\u044b \u044d\u0442\u043e \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u0438:&nbsp;<a href=\"https:\/\/maxpfrontend.ru\/vebinary\/nastroyka-eslint-prettier-pre-commit-hook-create-react-app-visual-studio-code\/\">\u0442\u0435\u043a\u0441\u0442<\/a>,&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=IpmiFPoDYVY&amp;t=\">\u0432\u0438\u0434\u0435\u043e<\/a>)<\/li><li><a href=\"https:\/\/palantir.github.io\/tslint\/\">TSLint<\/a>&nbsp;(\u0437\u0430\u043c\u0435\u043d\u0430 ESLint)<\/li><li>\u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0448\u0430\u0433\u043e\u0432<\/li><\/ul>\n\n\n\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441&nbsp;<em>src\/App.tsx<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import &#8216;.\/App.css&#8217;&nbsp;const App = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return &amp;lt;App \/&amp;gt;}&nbsp;export { RoutedApp }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/q18urik_wbchyz9vdxtehv-dnzu-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18910\"\/><\/figure>\n\n\n\n<p>\u041e\u043a, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432&nbsp;<code>&lt;App \/&gt;<\/code><\/p>\n\n\n\n<p><em>src\/App.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819<\/td><td>const App = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\/* \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 name \u0438\u0437 props *\/}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 nameconst RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return &amp;lt;App name=&#8221;Max Frontend&#8221; \/&amp;gt;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/blezsqbslnaqxm9ozalatxarh4w-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18911\"\/><\/figure>\n\n\n\n<p><em>(\u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0443, \u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0441\u0442\u0440\u043e\u0433\u043e\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432\u0430\u0448\u0435\u0433\u043e tsconfig.json, \u0442\u0430\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e noImplicitAny)<\/em><\/p>\n\n\n\n<p>\u0412\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0435\u0441\u044c \u043f\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u0448\u0438\u0431\u043a\u0438, \u0447\u0442\u043e \u043d\u0430\u0448\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u0442\u0438\u043f&nbsp;<strong>any<\/strong>. \u042d\u0442\u043e\u0442 \u0442\u0438\u043f \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a \u00ab\u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e\u00bb. \u041d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u043d\u0435\u044f\u0432\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0442\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430.<\/p>\n\n\n\n<p>\u2014 \u041d\u0435\u044f\u0432\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0442\u0438\u043f\u0430?<\/p>\n\n\n\n<p>\u2014 \u0418\u043c\u0435\u043d\u043d\u043e! TypeScript \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u043c\u0435\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u043e\u043d \u0441 \u044d\u0442\u0438\u043c \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/type-inference.html\">Type Inference<\/a><\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678<\/td><td>let x = 3\/\/ TS \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e x \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f number, \u0438 \u044d\u0442\u043e\u0442 number \u0432\u044b\u0432\u0435\u0434\u0435\u043d &#8220;\u043d\u0435 \u044f\u0432\u043d\u043e&#8221; (implicit)&nbsp;let x: number = 3 \/\/ \u043c\u044b \u044f\u0432\u043d\u043e (explicit) \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e x \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f number&nbsp;\/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u0442 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043a\u0430\u043a \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c,\/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0438 TS \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0442\u0438\u043f\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441&nbsp;<code>props<\/code>&nbsp;\u2014 TS \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 100% \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u2014 \u043f\u0443\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442&nbsp;<code>\u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e<\/code>&nbsp;(\u0442\u043e \u0435\u0441\u0442\u044c \u2014 \u0442\u0438\u043f&nbsp;<code>any<\/code>). \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u044f\u0432\u043d\u043e \u0438 \u044d\u0442\u043e \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\">noImplicitAny<\/a>&nbsp;\u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (tsconfig.json)<\/p>\n\n\n\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c&nbsp;<strong>\u044f\u0432\u043d\u043e<\/strong>&nbsp;\u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0438\u043f any \u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442. \u0422\u0438\u043f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617<\/td><td>\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435 :any\/\/ \u0438 \u0442\u0430\u043a \u043a\u0430\u043a &#8220;props: any&#8221; \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0431\u0435\u0437 \u043a\u0440\u0443\u0433\u043b\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0438 \u0438\u0445&nbsp;const App = (props: any) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0413\u043e\u0442\u043e\u0432\u043e, \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0435\u0442, \u043f\u0440\u043e\u0435\u043a\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043a\u0430\u043a\u043e\u0439 \u0442\u043e\u043b\u043a \u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430&nbsp;<code>props<\/code>&nbsp;\u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0447\u0435\u043c \u0443\u0433\u043e\u0434\u043d\u043e? \u041c\u044b \u0436\u0435 \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 name \u2014&nbsp;<code>\u0441\u0442\u0440\u043e\u043a\u0430<\/code>. \u041e\u0442\u0441\u044e\u0434\u0430 \u0432\u044b\u0442\u0435\u043a\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u043e:\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0442\u0438\u043f any<\/p>\n\n\n\n<p>\u0411\u044b\u0432\u0430\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430&nbsp;<code>any<\/code>&nbsp;\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0438 \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u044d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0443\u0434\u0430\u0440 \u043d\u0438\u0436\u0435 \u043f\u043e\u044f\u0441\u0430 \u043f\u043e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0438\u043f\u044b&nbsp;<code>props<\/code>, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e&nbsp;<code>interface<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122<\/td><td>\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c IAppProps\/\/ \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0432\u043f\u0435\u0440\u0435\u0434\u0438 \u0431\u0443\u043a\u0432\u0443 I, \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e TSLint \u043f\u0440\u0430\u0432\u0438\u043b\u043e\/\/ \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u0435 I \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u043c\u0435\u043d\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430&nbsp;interface IAppProps {&nbsp;&nbsp;name: string; \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f name \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f string}&nbsp;\/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 propsconst App = (props: IAppProps) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0438\u043f&nbsp;<code>name<\/code>&nbsp;\u043d\u0430&nbsp;<code>number<\/code>&nbsp;\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/ng0wwygq3jwv38hfezsspwuxjxu-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18912\"\/><\/figure>\n\n\n\n<p>\u041f\u0440\u0438\u0447\u0435\u043c, \u043e\u0448\u0438\u0431\u043a\u0430 \u0442\u0430\u043a \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u0430 \u0438 \u0432 VS Code (\u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445). \u041e\u0448\u0438\u0431\u043a\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435: \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443, \u0430 \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u0447\u0438\u0441\u043b\u043e.<\/p>\n\n\n\n<p>\u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432&nbsp;<code>&lt;App \/&gt;<\/code>&nbsp;\u0435\u0449\u0435 \u043e\u0434\u0438\u043d&nbsp;<code>props<\/code>&nbsp;\u2014 site<\/p>\n\n\n\n<p><em>src\/App.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718192021222324<\/td><td>interface IAppProps {&nbsp;&nbsp;name: string;}&nbsp;const App = (props: IAppProps) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\/* \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 site *\/}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u0421\u0430\u0439\u0442: {props.site}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 siteconst RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return &amp;lt;App name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221; \/&amp;gt;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>Type error: Property &#8216;site&#8217; does not exist on type &#8216;IAppProps&#8217;.&nbsp;&nbsp;TS2339<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<code>site<\/code>&nbsp;\u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0442\u0438\u043f\u0435&nbsp;<code>IAppProps<\/code>. \u0417\u0434\u0435\u0441\u044c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0442\u0438\u043f\u0430 \u043d\u0430\u043c \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0433\u0434\u0435 \u0438\u0441\u043a\u0430\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 \u0442\u0438\u043f\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n\n\n\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a: \u0443\u0434\u0430\u043b\u0438\u043c \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444, \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0449\u0438\u0439&nbsp;<code>props.site<\/code>.<\/p>\n\n\n\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/lwmblvrxxmsre4vudp0m1ioytas-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18913\"\/><\/figure>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0445\u043e\u0447\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043b\u0438\u0448\u044c \u0442\u043e, \u0447\u0442\u043e TS \u0432\u044b\u0432\u0435\u043b:&nbsp;<code>site<\/code>&nbsp;\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0438\u043f\u043e\u043c&nbsp;<code>string<\/code>&nbsp;(\u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u044d\u0442\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u043e).<\/p>\n\n\n\n<p>\u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617181920212223<\/td><td>interface IAppProps {&nbsp;&nbsp;name: string;&nbsp;&nbsp;site: string; \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u0430}&nbsp;const App = (props: IAppProps) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u0421\u0430\u0439\u0442: {props.site}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return &amp;lt;App name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221; \/&amp;gt;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041d\u0438 \u043e\u0448\u0438\u0431\u043e\u043a, \u043d\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 children. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0431\u0435\u0436\u0438\u043c \u0432\u043f\u0435\u0440\u0435\u0434, \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u00ab\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122<\/td><td>const App = (props: IAppProps) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8230; \/\/ \u0432\u044b\u0440\u0435\u0437\u0430\u043d\u043e&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u0421\u0430\u0439\u0442: {props.site}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{props.children}&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;const Baby = () =&amp;gt; {&nbsp;&nbsp;return &amp;lt;p&amp;gt;\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&amp;lt;\/p&amp;gt;}&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;App name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Baby \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/App&amp;gt;&nbsp;&nbsp;)}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>TS \u0440\u0443\u0433\u043d\u0435\u0442\u0441\u044f, \u043c\u043e\u043b \u0442\u0430\u043a \u0438 \u044d\u0434\u0430\u043a \u2014&nbsp;<code>children<\/code>&nbsp;\u043d\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432&nbsp;<code>IAppProps<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/lgybq1ydqpjhgpaqcs-hudstpos-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18914\"\/><\/figure>\n\n\n\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0430\u043c \u0431\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u00ab\u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00bb \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438 \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043c\u044c\u044e\u043d\u0438\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0436\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u043e \u043d\u0430\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/@types\/react\">@types\/react<\/a>&nbsp;\u043f\u0430\u043a\u0435\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f react.<\/p>\n\n\n\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u044d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 (\u0432 \u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043d \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123<\/td><td>React.FunctionComponent&amp;lt;P&amp;gt;\u0438\u043b\u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442React.FC&amp;lt;P&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0433\u0434\u0435&nbsp;<code>&lt;P&gt;<\/code>&nbsp;\u2014 \u044d\u0442\u043e \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445&nbsp;<code>props<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0442 \u0432\u0438\u0434.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>React.FC&amp;lt;IAppProps&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0443\u0432\u043b\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u0447\u0442\u0435\u043d\u0438\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043e\u0431\u044a\u0435\u043c\u043e\u0432 \u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u043e\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u00ab<a href=\"https:\/\/canonium.com\/articles\/typescript-generics\">\u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0438<\/a>\u00bb (\u0442\u0435 \u0441\u0430\u043c\u044b\u0435 &lt; \u0438 &gt;). \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445, \u043f\u043e\u043a\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043c \u044d\u0442\u0443 \u0444\u0440\u0430\u0437\u0443 \u0442\u0430\u043a: \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 &lt;\u0442\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430&gt;.<\/p>\n\n\n\n<p>\u0417\u0430\u043f\u0438\u0441\u044c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. \u041f\u043e\u043b\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f.<\/p>\n\n\n\n<p><em>src\/App.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718192021222324252627282930313233343536373839404142<\/td><td>\/\/ \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\/\/ \u0432\u043e\u0437\u044c\u043c\u0438 \u0432\u0441\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 React \u0438 \u043f\u043e\u043b\u043e\u0436\u0438 \u0438\u0445 \u0432 React.XXX,\/\/ \u0433\u0434\u0435 XXX &#8211; \u0438\u043c\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439import * as React from &#8216;react&#8217;&nbsp;\/\/ \u0422\u0430\u043a \u0436\u0435, \u0442\u0430\u0439\u043f \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u0430\u043c \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u0442\u0438\u043f\u044b\/\/ \u0438\u0437 @types\/react&nbsp;\/\/ \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439interface IAppProps {&nbsp;&nbsp;name: string;&nbsp;&nbsp;site: string;}&nbsp;\/\/ \u043d\u043e\u0432\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044cconst App: React.FC&amp;lt;IAppProps&amp;gt; = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u0421\u0430\u0439\u0442: {props.site}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{props.children}&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;const Baby = () =&amp;gt; {&nbsp;&nbsp;return &amp;lt;p&amp;gt;\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&amp;lt;\/p&amp;gt;}&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;App name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Baby \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/App&amp;gt;&nbsp;&nbsp;)}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>const App: React.FC&amp;lt;IAppProps&amp;gt; = props =&amp;gt; {<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u2014 \u041f\u043e\u0447\u0435\u043c\u0443 \u043f\u043e\u0441\u043b\u0435&nbsp;<code>props<\/code>&nbsp;\u0438\u0441\u0447\u0435\u0437 \u0442\u0438\u043f?<\/p>\n\n\n\n<p>\u2014 \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043f\u043e\u0441\u043b\u0435&nbsp;<code>App<\/code>&nbsp;\u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0441\u044f.<\/p>\n\n\n\n<p>\u041c\u044b \u0437\u0430\u043f\u0438\u0441\u0430\u043b\u0438, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f App \u0431\u0443\u0434\u0435\u0442 \u0442\u0438\u043f\u0430:&nbsp;<code>React.FC&lt;IAppProps&gt;<\/code>.<\/p>\n\n\n\n<p><code>React.FC<\/code>\u00a0\u2014 \u044d\u0442\u043e \u0442\u0438\u043f \u00ab\u0444\u0443\u043d\u043a\u0446\u0438\u044f\u00bb, \u0438 \u043c\u044b \u0432\u043d\u0443\u0442\u0440\u0438 &lt; > \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u043a\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u043e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u0448\u0438\u00a0<code>props<\/code>\u00a0\u0431\u0443\u0434\u0443\u0442 \u0442\u0438\u043f\u0430\u00a0<code>IAppProps<\/code>.<\/p>\n\n\n\n<p><em>(\u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0440\u0438\u0441\u043a, \u0447\u0442\u043e \u044f \u0432\u0430\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0432\u0440\u0430\u043b \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445, \u043d\u043e \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u044f \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e \u043e\u043a)<\/em><\/p>\n\n\n\n<p><strong>\u0418\u0442\u043e\u0433\u043e:<\/strong>&nbsp;\u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445&nbsp;<code>props<\/code>, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0432 \u00ab\u0441\u0432\u043e\u0438\u00bb \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/1-start-ready\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>&nbsp;\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<h3 id=\"dobavlyaem-routing\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h3>\n\n\n\n<p>\u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/reach.tech\/router\">reach-router<\/a>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043a\u0440\u0443\u0433\u043e\u0437\u043e\u0440. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 react-router.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2014 \u041d\u043e\u0432\u043e\u0441\u0442\u0438 (News), \u043f\u043e\u0434\u0447\u0438\u0441\u0442\u0438\u043c&nbsp;<code>&lt;App \/&gt;<\/code>.<\/p>\n\n\n\n<p><em>src\/pages\/News.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011<\/td><td>import * as React from &#8216;react&#8217;&nbsp;const News = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;news&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u043e\u0432\u043e\u0441\u0442\u0438&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;export { News }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><em>src\/App.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617181920212223242526272829303132333435363738394041424344<\/td><td>import * as React from &#8216;react&#8217;&nbsp;\/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0432\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0438\u0437 reach-routerimport { Link, Router } from &#8216;@reach\/router&#8217;&nbsp;import { News } from &#8216;.\/pages\/News&#8217;&nbsp;import &#8216;.\/App.css&#8217;&nbsp;interface IAppProps {&nbsp;&nbsp;name: string;&nbsp;&nbsp;site: string;}&nbsp;const App: React.FC&amp;lt;IAppProps&amp;gt; = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Link to=&#8221;\/&#8221;&amp;gt;Home&amp;lt;\/Link&amp;gt; &amp;lt;Link to=&#8221;news&#8221;&amp;gt;News&amp;lt;\/Link&amp;gt;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;hr \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u0410\u0432\u0442\u043e\u0440: {props.name} | \u0421\u0430\u0439\u0442: {props.site}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;hr \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{props.children}&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;\/\/ \u0443\u0434\u0430\u043b\u0438\u043b\u0438 Baby, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 News. \u0414\u043b\u044f app &#8211; \u0443\u043a\u0430\u0437\u0430\u043b\u0438 pathconst RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Router&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;App path=&#8221;\/&#8221; name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;News path=&#8221;\/news&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/App&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/Router&amp;gt;&nbsp;&nbsp;)}&nbsp;export { RoutedApp }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u043e\u0441\u044c, \u043e\u0448\u0438\u0431\u043a\u0430 (\u043e\u0434\u043d\u0430 \u0438\u0437 \u043e\u0448\u0438\u0431\u043e\u043a, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u0443\u044e):<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/b8dvlqxmlh5hqifh6eclq9tue-e-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18915\"\/><\/figure>\n\n\n\n<p>\u041a \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043c\u044b \u0443\u0436\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438, \u0438 \u043f\u043e \u043d\u0435\u0439 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e&nbsp;<code>path<\/code>&nbsp;\u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f&nbsp;<code>&lt;App \/&gt;<\/code>.<\/p>\n\n\n\n<p>\u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u0432\u0441\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0434\u043e \u043d\u0430\u0441. \u041c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043f\u0430\u043a\u0435\u0442\u043e\u043c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/@types\/reach__router\">@types\/reach__router<\/a>&nbsp;\u0438 \u0442\u0438\u043f\u043e\u043c&nbsp;<code>RouteComponentProps<\/code>. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e&nbsp;<code>extends<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718<\/td><td>import * as React from &#8216;react&#8217;&nbsp;\/\/ \u0432\u044b\u0442\u0430\u0449\u0438\u043b\u0438 \u0442\u0438\u043f RouteComponentProps \u0438\u0437 \u0440\u0438\u0447-\u0440\u043e\u0443\u0442\u0435\u0440\u0430\/\/ ts \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0441\u0430\u043c \u043f\u043e\u0439\u043c\u0435\u0442 \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044cimport { Link, RouteComponentProps, Router } from &#8216;@reach\/router&#8217;&nbsp;import { News } from &#8216;.\/pages\/News&#8217;&nbsp;import &#8216;.\/App.css&#8217;&nbsp;\/\/ extends \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u0438\u043f\u044b \u0438\u0437 RouteComponentProps\/\/ \u0438 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438interface IAppProps extends RouteComponentProps {&nbsp;&nbsp;name: string;&nbsp;&nbsp;site: string;}&nbsp;\/\/ &#8230; \u0434\u0430\u043b\u0435\u0435 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0414\u043b\u044f \u043b\u044e\u0431\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445, \u0447\u0442\u043e \u0437\u0430 \u0442\u0438\u043f\u044b \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432&nbsp;<a href=\"https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\/blob\/master\/types\/reach__router\/index.d.ts#L38\">RouteComponentProps<\/a>.<\/p>\n\n\n\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u0432&nbsp;<code>&lt;App \/&gt;<\/code>&nbsp;\u0438\u0441\u0447\u0435\u0437\u043b\u0430, \u043d\u043e \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0432&nbsp;<code>&lt;News \/&gt;<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u041c\u0438\u043d\u0438 \u0437\u0430\u0434\u0430\u0447\u043a\u0430: \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f&nbsp;<code>&lt;News \/&gt;<\/code>. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0442\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n\n\n\n<p>\u041e\u0442\u0432\u0435\u0442:<\/p>\n\n\n\n<p><em>src\/Pages\/News.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { RouteComponentProps } from &#8216;@reach\/router&#8217;&nbsp;\/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e RouteComponentProps\/\/ \u043c\u044b \u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 P ( React.FC&amp;lt;P&amp;gt; )const News: React.FC&amp;lt;RouteComponentProps&amp;gt; = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;news&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u041d\u043e\u0432\u043e\u0441\u0442\u0438&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;export { News }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/3we6s5lytmjiscrhckuodzqgh_a-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18916\"\/><\/figure>\n\n\n\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u0435\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u043e\u0443\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c.&nbsp;<a href=\"https:\/\/reach.tech\/router\/example\/url-params\">\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 reach-router<\/a>&nbsp;\u0436\u0438\u0432\u0443\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 props. \u0412 react-router, \u043a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u043e\u043d\u0438 \u0436\u0438\u0432\u0443\u0442 \u0432&nbsp;<code>props.match<\/code>.<\/p>\n\n\n\n<p><em>src\/App.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { Link, RouteComponentProps, Router } from &#8216;@reach\/router&#8217;&nbsp;import { About } from &#8216;.\/pages\/About&#8217;import { News } from &#8216;.\/pages\/News&#8217;&nbsp;\/\/ &#8230; (\u0432\u044b\u0440\u0435\u0437\u0430\u043d\u043e)&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Router&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;App path=&#8221;\/&#8221; name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;News path=&#8221;\/news&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\/* \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0440\u043e\u0443\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c source *\/}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;About path=&#8221;\/about\/:source&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/App&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/Router&amp;gt;&nbsp;&nbsp;)}&nbsp;export { RoutedApp }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>src\/pages\/About.tsx<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { RouteComponentProps } from &#8216;@reach\/router&#8217;&nbsp;const About: React.FC&amp;lt;RouteComponentProps&amp;gt; = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;about&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 about&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\/* \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c source \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 *\/}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;{props.source}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;export { About }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041e\u0448\u0438\u0431\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043d\u0435 \u0436\u0434\u0430\u043b\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/g77btjjgskynumayxiq7aaz5lfi-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18917\"\/><\/figure>\n\n\n\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e source \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442\u2026 \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043d\u0435\u0434\u043e\u0443\u043c\u0435\u043d\u0438\u0435: \u043c\u044b \u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432 path, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 string, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0440\u0430\u0434\u043e\u0441\u0442\u044c: \u0410\u0445, \u0442\u044b \u0436, \u043a\u0430\u043a \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0438\u0441\u044c \u0430\u0432\u0442\u043e\u0440\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0430\u043c \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f&nbsp;<a href=\"https:\/\/github.com\/reach\/router\/issues\/141\">\u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432<\/a>: \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f (extend) \u043e\u0442&nbsp;<code>RouteComponentProps<\/code>&nbsp;\u0438 \u0443\u043a\u0430\u0436\u0435\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<code>source<\/code>. \u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c URL-\u0430\u0434\u0440\u0435\u0441\u0435.<\/p>\n\n\n\n<p>\u0412 TypeScript \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u043a \u0432\u043e\u043f\u0440\u043e\u0441\u0430.<\/p>\n\n\n\n<p><em>src\/pages\/About.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { RouteComponentProps } from &#8216;@reach\/router&#8217;&nbsp;interface IAboutProps extends RouteComponentProps {&nbsp;&nbsp;source?: string; \/\/ \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 source &#8211; \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439, \u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c (\u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 props.source \u0431\u0443\u0434\u0435\u0442 undefined)}&nbsp;const About: React.FC&amp;lt;IAboutProps&amp;gt; = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;about&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 about&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;{props.source}&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;export { About }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><em>src\/App.tsx<\/em>&nbsp;(\u0437\u0430\u043e\u0434\u043d\u043e \u0440\u0443\u0441\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e)<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718192021222324252627282930313233343536373839404142434445<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { Link, RouteComponentProps, Router } from &#8216;@reach\/router&#8217;&nbsp;import { About } from &#8216;.\/pages\/About&#8217;import { News } from &#8216;.\/pages\/News&#8217;&nbsp;import &#8216;.\/App.css&#8217;&nbsp;interface IAppProps extends RouteComponentProps {&nbsp;&nbsp;name: string;&nbsp;&nbsp;site: string;}&nbsp;const App: React.FC&amp;lt;IAppProps&amp;gt; = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Link to=&#8221;\/&#8221;&amp;gt;\u0414\u043e\u043c\u043e\u0439&amp;lt;\/Link&amp;gt; &amp;lt;Link to=&#8221;news&#8221;&amp;gt;\u041d\u043e\u0432\u043e\u0441\u0442\u0438&amp;lt;\/Link&amp;gt;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Link to=&#8221;\/about\/habr&#8221;&amp;gt;\u041f\u0440\u043e habr&amp;lt;\/Link&amp;gt;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;hr \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u0410\u0432\u0442\u043e\u0440: {props.name} | \u0421\u0430\u0439\u0442: {props.site}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/p&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;hr \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{props.children}&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Router&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;App path=&#8221;\/&#8221; name=&#8221;Max Frontend&#8221; site=&#8221;maxpfrontend.ru&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;News path=&#8221;\/news&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;About path=&#8221;\/about\/:source&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/App&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/Router&amp;gt;&nbsp;&nbsp;)}&nbsp;export { RoutedApp }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/wurp7kieptt8l3yxhvftq53lrpa-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18918\"\/><\/figure>\n\n\n\n<p><strong>\u0418\u0442\u043e\u0433\u043e<\/strong>: \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432 \u0440\u043e\u0442\u0443\u0438\u043d\u0433\u0435.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/2-router-ready\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>&nbsp;\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<h3 id=\"porabotaem-s-hukami-i-prodolzhim-tipizirovat\">\u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0445\u0443\u043a\u0430\u043c\u0438 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/h3>\n\n\n\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u043d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/hackmd.io\/s\/BJWYLsmD4\">\u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/a>, \u043d\u043e \u0431\u0435\u0437 Redux.<\/p>\n\n\n\n<p>\u042f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/3-ts-tz-1-start\">\u0432\u0435\u0442\u043a\u0443<\/a>&nbsp;\u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0441 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c, \u043d\u0435\u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u0444\u043e\u0440\u043c\u043e\u0439 \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/klonvq2srhgst8rdy3ksjrhxzkc-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18919\"\/><\/figure>\n\n\n\n<h4 id=\"zagruzhaem-novosti\">\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0441\u0442\u0438<\/h4>\n\n\n\n<p>\u041d\u043e\u0432\u043e\u0441\u0442\u0438 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n\n\n\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0443 \u043d\u043e\u0432\u043e\u0441\u0442\u044c:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678<\/td><td>{&nbsp;&nbsp;id: 1,&nbsp;&nbsp;title: &#8216;\u0414\u0435\u043b\u0430\u0435\u043c CRUD \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React-hooks&#8217;,&nbsp;&nbsp;text: &#8216;\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0441\u043f\u0435\u043a\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0435 CRUD-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0431\u044d\u043a\u044d\u043d\u0434\u0430&#8217;,&nbsp;&nbsp;link:&nbsp;&nbsp;&nbsp;&nbsp;&#8216;https:\/\/maxpfrontend.ru\/perevody\/delaem-crud-prilozhenie-s-pomoschyu-react-hooks\/&#8217;,&nbsp;&nbsp;timestamp: new Date(&#8217;01-15-2019&#8242;),},<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c (\u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0438):<\/p>\n\n\n\n<p><em>src\/models\/news.ts<\/em>&nbsp;(\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435&nbsp;<strong>.ts<\/strong>)<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567<\/td><td>export interface INewsItem {&nbsp;&nbsp;id: number;&nbsp;&nbsp;title: string;&nbsp;&nbsp;text: string;&nbsp;&nbsp;link: string;&nbsp;&nbsp;timestamp: Date;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0418\u0437 \u043d\u043e\u0432\u0435\u043d\u044c\u043a\u043e\u0433\u043e \u2014 timestamp \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0442\u0438\u043f&nbsp;<code>Date<\/code>.<\/p>\n\n\n\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u043d\u0430\u0448 \u0432\u044b\u0437\u043e\u0432 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718192021222324252627282930313233343536<\/td><td>const fakeData = [&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;id: 1,&nbsp;&nbsp;&nbsp;&nbsp;title: &#8216;\u0414\u0435\u043b\u0430\u0435\u043c CRUD \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React-hooks&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;text: &#8216;\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0441\u043f\u0435\u043a\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0435 CRUD-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0431\u044d\u043a\u044d\u043d\u0434\u0430&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8216;https:\/\/maxpfrontend.ru\/perevody\/delaem-crud-prilozhenie-s-pomoschyu-react-hooks\/&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;timestamp: new Date(&#8217;01-15-2019&#8242;),&nbsp;&nbsp;},&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;id: 2,&nbsp;&nbsp;&nbsp;&nbsp;title: &#8216;\u0417\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 React hooks&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;text: &#8216;\u0418\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c useState \u0438 useEffect \u0445\u0443\u043a\u0438&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;link: &#8216;https:\/\/maxpfrontend.ru\/perevody\/znakomstvo-s-react-hooks\/&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;timestamp: new Date(&#8217;01-06-2019&#8242;),&nbsp;&nbsp;},&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;id: 3,&nbsp;&nbsp;&nbsp;&nbsp;title: &#8216;\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Google Sign In&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;text: &#8216;\u041a\u0430\u043a \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Google Sign In \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8216;https:\/\/maxpfrontend.ru\/vebinary\/avtorizatsiya-s-pomoschyu-google-sign-in\/&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;timestamp: new Date(&#8217;11-02-2018&#8242;),&nbsp;&nbsp;},]&nbsp;export const getNews = () =&amp;gt; {&nbsp;&nbsp;const promise = new Promise(resolve =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;resolve({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status: 200,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: fakeData, \/\/ \u0432\u044b\u0434\u0430\u0435\u043c \u043d\u0430\u0448\u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0438&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;return promise \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c promise}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041d\u0430\u0448 \u0432\u044b\u0437\u043e\u0432 \u0438\u0437&nbsp;<em>api<\/em>&nbsp;<code>getNews<\/code>&nbsp;\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442&nbsp;<a href=\"https:\/\/learn.javascript.ru\/promise\">Promise<\/a>, \u043f\u0440\u0438\u0447\u0435\u043c \u044d\u0442\u043e\u0442 \u00ab\u043f\u0440\u043e\u043c\u0438\u0441\u00bb \u0438\u043c\u0435\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617<\/td><td>interface INewsResponse {&nbsp;&nbsp;status: number; \/\/ \u0441\u0442\u0430\u0442\u0443\u0441 &#8211; \u0447\u0438\u0441\u043b\u043e&nbsp;&nbsp;data: INewsItem[]; \/\/ data &#8211; \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u0438\u0447\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0442\u0438\u043f\u0430 INewsItem [1]&nbsp;&nbsp;errorText?: string; \/\/ \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435 errorText \u0442\u0438\u043f\u0430 \u0441\u0442\u0440\u043e\u043a\u0430, \u0430 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442}&nbsp;\/\/ [1] \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0432 models \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0430\u0448\u0443 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u0438export interface INewsItem {&nbsp;&nbsp;id: number;&nbsp;&nbsp;title: string;&nbsp;&nbsp;text: string;&nbsp;&nbsp;link: string;&nbsp;&nbsp;timestamp: Date;}&nbsp;\/\/ \u0437\u0430\u043f\u0438\u0441\u044c \u0432\u0438\u0434\u0430 \u043a\u0430\u043a\u043e\u0439_\u0442\u043e_\u0442\u0438\u043f[] &#8211; \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043c \u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043a\u043e\u0433\u043e_\u0442\u043e_\u0442\u0438\u043f\u0430\/\/ [{\u043a\u0430\u043a\u043e\u0439_\u0442\u043e_\u0442\u0438\u043f}, {\u043a\u0430\u043a\u043e\u0439_\u0442\u043e_\u0442\u0438\u043f}, {\u043a\u0430\u043a\u043e\u0439_\u0442\u043e_\u0442\u0438\u043f}]<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0416\u0430\u0440\u043a\u043e? \u0421\u0435\u0439\u0447\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0435\u0449\u0435 \u0436\u0430\u0440\u0447\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0438\u043f Promise \u2014 \u044d\u0442\u043e \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a, \u043d\u0430\u043c \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u043e \u0441&nbsp;<code>&lt;<\/code>&nbsp;\u0438&nbsp;<code>&gt;<\/code>. \u042d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434:<\/p>\n\n\n\n<p><em>src\/api\/News.ts<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122232425262728293031323334<\/td><td>import { INewsItem } from &#8216;..\/models\/news&#8217; \/\/ \u0432\u044b\u0442\u0430\u0449\u0438\u043b\u0438 \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443 \u043d\u043e\u0432\u043e\u0441\u0442\u0438&nbsp;interface INewsResponse { \/\/ \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0442\u0438\u043f \u0434\u043b\u044f \u041e\u0422\u0412\u0415\u0422\u0410_\u041e\u0422_\u0421\u0415\u0420\u0412\u0415\u0420\u0410&nbsp;&nbsp;status: number;&nbsp;&nbsp;data: INewsItem[];&nbsp;&nbsp;errorText?: string;}&nbsp;const fakeData = [&nbsp;&nbsp;\/\/&#8230; \u0432\u044b\u0440\u0435\u0437\u0430\u043d\u043e]&nbsp;\/\/ \u0434\u0430\u043b\u0435\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435:\/\/ const myFunc = ():\u0442\u0438\u043f_\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435\u0433\u043e_\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 { return \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435_\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 }&nbsp;\/\/ getNews &#8211; \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u043e\u043b\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 () (\u043d\u0435\u0447\u0435\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c)\/\/ \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0438\u043f Promise\/\/ \u0442\u0430\u043a \u043a\u0430\u043a Promise &#8211; \u044d\u0442\u043e generic, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c:\/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Promise&amp;lt;T&amp;gt;, \u0433\u0434\u0435 T &#8211; \u044d\u0442\u043e \u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u043c\u0438\u0441\u0435 [1]\/\/ \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u044d\u0442\u043e\u0442 T \u043e\u043f\u0438\u0441\u0430\u043d, \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f &#8211; INewsResponse&nbsp;export const getNews = (): Promise&amp;lt;INewsResponse&amp;gt; =&amp;gt; {&nbsp;&nbsp;&nbsp;\/\/ \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0438\u0436\u0435, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e [1]&nbsp;&nbsp;const promise = new Promise&amp;lt;INewsResponse&amp;gt;(resolve =&amp;gt; { \/\/ [2]&nbsp;&nbsp;&nbsp;&nbsp;resolve({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status: 200,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: fakeData,&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;return promise \/\/ \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e promise [2] \u0442\u0438\u043f\u0430 Promise&amp;lt;INewsResponse&amp;gt;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u043a\u0443\u0440.<\/p>\n\n\n\n<h4 id=\"pokazyvaem-novosti\">\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0441\u0442\u0438<\/h4>\n\n\n\n<p><em>src\/pages\/News.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617181920212223242526272829303132333435363738<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { RouteComponentProps } from &#8216;@reach\/router&#8217;import { getNews } from &#8216;..\/api\/news&#8217;import { NewsItem } from &#8216;..\/components\/NewsItem&#8217; \/\/ \u0435\u0449\u0435 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432import { INewsItem } from &#8216;..\/models\/news&#8217;&nbsp;const News: React.FC&amp;lt;RouteComponentProps&amp;gt; = () =&amp;gt; {&nbsp;&nbsp;\/\/ useState &#8211; \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0442\u0438\u043f T&nbsp;&nbsp;\/\/ \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0442\u0438\u043f T &#8211; \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 INewsItem&nbsp;&nbsp;\/\/ \u0442\u0430\u043a \u0436\u0435, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 []&nbsp;&nbsp;&nbsp;const [news, setNews] = React.useState&amp;lt;INewsItem[]&amp;gt;([]) \/\/ &amp;lt;- \u0437\u0434\u0435\u0441\u044c \u0432 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435&nbsp;&nbsp;&nbsp;React.useEffect(() =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;getNews()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(res =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setNews(res.data)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.catch(err =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ \u043d\u0430\u0448\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 TSLint \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u044e\u0442 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043a\u043e\u0434\u0435 console.log&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443, &#8220;\u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043c&#8221; \u043b\u0438\u043d\u0442\u0435\u0440 \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ tslint:disable-next-line: no-console&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.warn(&#8216;Getting news problem&#8217;, err)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;}, [])&nbsp;&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;news&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{news.map(item =&amp;gt; (&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;NewsItem data={item} key={item.id} \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;))}&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;export { News }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0412 \u043a\u043e\u0434\u0435 \u0434\u0430\u043d\u044b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u0441\u0430\u044e\u0442\u0441\u044f TypeScript. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0441 react-hooks, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c:&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a>&nbsp;(EN),&nbsp;<a href=\"https:\/\/maxpfrontend.ru\/perevody\/delaem-crud-prilozhenie-s-pomoschyu-react-hooks\/\">\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/a>&nbsp;(RU).<\/p>\n\n\n\n<p>\u0417\u0430\u0434\u0430\u0447\u0430: \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp;<code>&lt;NewsItem \/&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u0438. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u043e\u0434\u0435\u043b\u044c&nbsp;<code>INewsItem<\/code>.<\/p>\n\n\n\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/dd_n6j_skmv7htcig1nqrwb9cce-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18920\"\/><\/figure>\n\n\n\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<p><em>src\/components\/NewsItem.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617181920212223242526272829<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { INewsItem } from &#8216;..\/models\/news&#8217;&nbsp;interface INewsItemProps {&nbsp;&nbsp;data: INewsItem; \/\/ [1]}&nbsp;\/\/ [2]const NewsItem: React.FC&amp;lt;INewsItemProps&amp;gt; = ({&nbsp;&nbsp;data: { title, text, timestamp, link },}) =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;article&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;br \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;a href={link} target=&#8221;_blank&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{title}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/a&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| {timestamp.toLocaleDateString()}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div&amp;gt;{text}&amp;lt;\/div&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/article&amp;gt;&nbsp;&nbsp;)}&nbsp;export { NewsItem }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0412\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c (\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 \u043a\u043e\u0434\u0435 [1] \u0438 [2]). \u041c\u043e\u0433\u043b\u0438 \u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>React.FC&amp;lt;INewsItem&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041e\u0432\u0435\u0442 \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p>\u041d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435&nbsp;<code>data<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>React.FC&amp;lt;{ data: INewsItem }&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0427\u0442\u043e \u043c\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438, \u043b\u0438\u0448\u044c \u0441 \u0442\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435\u043c, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043b\u0438&nbsp;<code>interface<\/code>, \u043d\u0430 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u0430 \u0438 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043b\u0443\u0447\u0448\u0435.<\/p>\n\n\n\n<p><strong>\u0418\u0442\u043e\u0433\u043e:<\/strong>&nbsp;\u043f\u043e\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f Promise \u0438 useEffect. \u041e\u043f\u0438\u0441\u0430\u043b\u0438 \u0442\u0438\u043f \u0434\u043b\u044f \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u0445\u043b\u043e\u043f\u0430\u0435\u0442\u0435 \u0432 \u043b\u0430\u0434\u043e\u0448\u0438 \u043e\u0442 \u0430\u0432\u0442\u043e\u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u0441\u0442\u0438 TS, \u0442\u043e \u0432\u044b \u043b\u0438\u0431\u043e \u043d\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u0442\u0435, \u043b\u0438\u0431\u043e \u0441\u0442\u0440\u043e\u0433\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043b\u044f \u0432\u0430\u0441. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u043d\u0438\u0447\u0435\u043c \u043f\u043e\u043c\u043e\u0447\u044c \u043d\u0435 \u043c\u043e\u0433\u0443, \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0432\u043a\u0443\u0441\u0430. \u041e\u0431\u0440\u0430\u0449\u0430\u044e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0440\u044b\u043d\u043e\u043a \u0434\u0438\u043a\u0442\u0443\u0435\u0442 \u0441\u0432\u043e\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0438 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0436\u0438\u0432\u0443\u0442 \u0441 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0441 TypeScript, \u0442\u043e \u0441&nbsp;<a href=\"https:\/\/flow.org\/\">flow<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/4-news-item-ready\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>&nbsp;\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"auth-api\">Auth api<\/h4>\n\n\n\n<p>\u041d\u0430\u043f\u0438\u0448\u0438&nbsp;<code>api<\/code>&nbsp;\u0434\u043b\u044f \u043b\u043e\u0433\u0438\u043d\u0430. \u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0441\u0445\u043e\u0436\u0438\u0439 \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c&nbsp;<code>promise<\/code>&nbsp;\u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\/\u043e\u0448\u0438\u0431\u043a\u0430. \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432&nbsp;<code>localStorage<\/code>&nbsp;(<em>\u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u0447\u0438\u0442\u0430\u044e\u0442 \u044d\u0442\u043e \u0432\u043e\u043f\u0438\u044e\u0449\u0438\u043c \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0430\u043b \u043e\u0442 \u0441\u043f\u043e\u0440\u043e\u0432 \u0438 \u043d\u0435 \u0437\u043d\u0430\u044e \u0447\u0435\u043c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u043e\u0441\u044c<\/em>).<\/p>\n\n\n\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043b\u043e\u0433\u0438\u043d \u044d\u0442\u043e \u0441\u0432\u044f\u0437\u043a\u0430 \u0438\u043c\u0435\u043d\u0438 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f (\u0438 \u0442\u043e \u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 string), \u043e\u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c:<\/p>\n\n\n\n<p><em>src\/models\/user.ts<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234<\/td><td>export interface IUserIdentity {&nbsp;&nbsp;username: string;&nbsp;&nbsp;password: string;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><em>src\/api\/auth.ts<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667<\/td><td>import { navigate } from &#8216;@reach\/router&#8217;import { IUserIdentity } from &#8216;..\/models\/user&#8217;&nbsp;\/\/ \u0432\u043d\u043e\u0432\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 \u0431\u044d\u043a\u044d\u043d\u0434\u0430\/\/ \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 data &#8211; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c any (\u0442\u043e \u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e)\/\/ \u0437\u0434\u0435\u0441\u044c, \u044d\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u044d\u043a\u044d\u043d\u0434\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442,\/\/ \u0438 \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u0442 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 (\u0431\u0443\u0434\u0442\u043e \u0431\u044b)&nbsp;interface IAuthResponse {&nbsp;&nbsp;status: number;&nbsp;&nbsp;data?: any; [1]&nbsp;&nbsp;errorText?: string;}&nbsp;\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0442\u043e-\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0430\u0434\u043c\u0438\u043d \u044d\u0442\u043e \u0438\u043b\u0438 \u043d\u0435\u0442\/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0438\u043f IUserIdentity\/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 &#8211; \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 boolean \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (true \u0438\u043b\u0438 false)&nbsp;const checkCredentials = (data: IUserIdentity): boolean =&amp;gt; {&nbsp;&nbsp;if (data.username === &#8216;Admin&#8217; &amp;amp;&amp;amp; data.password === &#8216;12345&#8217;) {&nbsp;&nbsp;&nbsp;&nbsp;return true&nbsp;&nbsp;} else {&nbsp;&nbsp;&nbsp;&nbsp;return false&nbsp;&nbsp;}}&nbsp;\/\/ \u0437\u0430\u043f\u0440\u043e\u0441 \u043a &#8220;\u043f\u0441\u0435\u0432\u0434\u043e-\u0431\u044d\u043a\u044d\u043d\u0434\u0443&#8221;, \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0442\u043e\u0447\u043d\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438\/\/ \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 1 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8211; data\/\/ \u0432\u043e\u0432\u0437\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0430\u043a \u0436\u0435 Promise&amp;lt;T&amp;gt;, \u0433\u0434\u0435 T &#8211; \u0442\u0438\u043f\u0430 IAuthResponse&nbsp;export const authenticate = (data: IUserIdentity): Promise&amp;lt;IAuthResponse&amp;gt; =&amp;gt; {&nbsp;&nbsp;const promise = new Promise&amp;lt;IAuthResponse&amp;gt;((resolve, reject) =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;if (!checkCredentials(data)) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status: 500,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorText: &#8216;incorrect_login_or_password&#8217;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;window.localStorage.setItem(&#8216;tstz.authenticated&#8217;, &#8216;true&#8217;)&nbsp;&nbsp;&nbsp;&nbsp;resolve({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status: 200,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: &#8216;ok&#8217;, \/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u043f\u0441\u0435\u0432\u0434\u043e-\u0431\u044d\u043a\u044d\u043d\u0434 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 string, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 IAuthResponse [1] any \u043d\u0430 string&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;return promise}&nbsp;\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\/\/ \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 0 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 ()\/\/ \u0432\u043e\u0432\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true \u0438\u043b\u0438 false (\u0442\u0438\u043f boolean)&nbsp;export const checkAuthStatus = (): boolean =&amp;gt; {&nbsp;&nbsp;if (localStorage.getItem(&#8216;tstz.authenticated&#8217;)) {&nbsp;&nbsp;&nbsp;&nbsp;return true&nbsp;&nbsp;} else {&nbsp;&nbsp;&nbsp;&nbsp;return false&nbsp;&nbsp;}}&nbsp;\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043b\u043e\u0433\u0430\u0443\u0442\u0430, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 0 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432\/\/ \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 (\u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0438\u043f void)&nbsp;export const logout = (): void =&amp;gt; {&nbsp;&nbsp;window.localStorage.removeItem(&#8216;tstz.authenticated&#8217;)&nbsp;&nbsp;navigate(&#8216;\/&#8217;) \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0431\u0440\u043e\u0441\u0430 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 url-\u0430\u0434\u0440\u0435\u0441 (reach-router)}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041b\u0438\u0441\u0442\u0438\u043d\u0433 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u044b\u0439, \u043d\u043e \u0432 \u043d\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u0435 \u043d\u0430\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e.<\/p>\n\n\n\n<p>\u0418\u0437 \u043d\u043e\u0432\u043e\u0433\u043e:<\/p>\n\n\n\n<ul><li>\u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0438\u043f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f&nbsp;<code>void<\/code><\/li><li>\u0434\u043b\u044f \u00ab\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0431\u0440\u043e\u0441\u0430\u00bb \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 URL, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c&nbsp;<a href=\"https:\/\/reach.tech\/router\/api\/navigate\">navigate<\/a><\/li><\/ul>\n\n\n\n<h4 id=\"forma-logina\">\u0424\u043e\u0440\u043c\u0430 \u043b\u043e\u0433\u0438\u043d\u0430<\/h4>\n\n\n\n<p>\u0417\u0430\u0434\u0430\u043d\u0438\u0435: \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u043b\u043e\u0433\u0438\u043d\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\">useState<\/a>&nbsp;\u0445\u0443\u043a. \u0414\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430&nbsp;<code>event<\/code>&nbsp;\u0432&nbsp;<code>onChange<\/code>\/<code>onSubmit<\/code>&nbsp;\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u2014 \u0443\u043a\u0430\u0436\u0438\u0442\u0435&nbsp;<code>any<\/code>. \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438.<\/p>\n\n\n\n<p><code>React.useState<\/code>&nbsp;\u2014 \u0442\u0430\u043a \u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u043e\u043c, \u0437\u043d\u0430\u0447\u0438\u0442 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f \u0422 (<code>React.useState&lt;T&gt;<\/code>)<\/p>\n\n\n\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u0437\u0430\u0434\u0430\u0447\u0438, \u0435\u0441\u043b\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0435 \u0432\u0435\u0440\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u044b \u0432\u0435\u0440\u043d\u044b\u0435, \u0442\u043e \u043f\u0435\u0440\u0435\u0430\u0434\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430&nbsp;<code>\/profile<\/code>&nbsp;(\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435&nbsp;<code>navigate<\/code>)<\/p>\n\n\n\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<p><em>src\/pages\/Login.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { navigate, RouteComponentProps } from &#8216;@reach\/router&#8217;&nbsp;import { authenticate } from &#8216;..\/api\/auth&#8217;import { IUserIdentity } from &#8216;..\/models\/user&#8217;&nbsp;\/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e, \u043a\u0440\u043e\u043c\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438\u0437 \u0440\u043e\u0443\u0442\u0435\u0440\u0430\/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u0432 &amp;lt; &amp;gt;const Login: React.FC&amp;lt;RouteComponentProps&amp;gt; = () =&amp;gt; {&nbsp;&nbsp;&nbsp;\/\/ useStaet \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 useEffect &#8211; \u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a,&nbsp;&nbsp;\/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 state&nbsp;&nbsp;const [user, setField] = React.useState&amp;lt;IUserIdentity&amp;gt;({&nbsp;&nbsp;&nbsp;&nbsp;username: &#8221;,&nbsp;&nbsp;&nbsp;&nbsp;password: &#8221;,&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;\/\/ \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0438\u043f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 (\u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430) \u0434\u043b\u044f &#8220;\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f&#8221;&nbsp;&nbsp;const [notification, setNotification] = React.useState&amp;lt;string&amp;gt;(&#8221;)&nbsp;&nbsp;&nbsp;\/\/ \u0434\u043b\u044f e (event) \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e &amp;lt;input \/&amp;gt;&nbsp;&nbsp;\/\/ \u0437\u0430\u043f\u0438\u0441\u044c \u0438\u043c\u0435\u0435\u0442 \u0432\u0438\u0434: React.SyntheticEvent&amp;lt;HTMLInputElement&amp;gt;&nbsp;&nbsp;const onInputChange = (fieldName: string) =&amp;gt; (&nbsp;&nbsp;&nbsp;&nbsp;e: React.SyntheticEvent&amp;lt;HTMLInputElement&amp;gt;&nbsp;&nbsp;): void =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;setField({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8230;user,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[fieldName]: e.currentTarget.value,&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;setNotification(&#8221;)&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;\/\/ \u0434\u043b\u044f e (event) \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u044d\u0433 form&nbsp;&nbsp;\/\/ \u0437\u0430\u043f\u0438\u0441\u044c \u0438\u043c\u0435\u0435\u0442 \u0432\u0438\u0434: React.SyntheticEvent&amp;lt;HTMLFormElement&amp;gt;&nbsp;&nbsp;const onSubmit = (e: React.SyntheticEvent&amp;lt;HTMLFormElement&amp;gt;): void =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault()&nbsp;&nbsp;&nbsp;&nbsp;authenticate(user)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(() =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigate(`\/profile`) \/\/ \u043f\u0435\u0440\u0435\u0430\u0434\u0440\u0435\u0441\u0430\u0446\u0438\u044f \u043d\u0430 profile&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.catch(err =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err.errorText) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setNotification(err.errorText)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ tslint:disable-next-line: no-console&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.warn(&#8216;request problem&#8217;, err)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h2&amp;gt;Login&amp;lt;\/h2&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;form onSubmit={onSubmit}&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{notification ? &amp;lt;p&amp;gt;{notification}&amp;lt;\/p&amp;gt; : null}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;input&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&#8221;text&#8221;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value={user.username}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange={onInputChange(&#8216;username&#8217;)}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;input&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&#8221;text&#8221;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value={user.password}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange={onInputChange(&#8216;password&#8217;)}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;button&amp;gt;Login&amp;lt;\/button&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/form&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/&amp;gt;&nbsp;&nbsp;)}&nbsp;export { Login }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0422\u043e, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f TS \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0435\u0441\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c, \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 JavaScript.<\/p>\n\n\n\n<p><strong>\u0418\u0442\u043e\u0433\u043e:<\/strong>&nbsp;\u043f\u043e\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441 useState \u0438 \u0443\u0437\u043d\u0430\u043b\u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/learn.javascript.ru\/event-details\">event<\/a><\/p>\n\n\n\n<p>\u2192&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/5-login-ready\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>&nbsp;\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442<\/p>\n\n\n\n<h4 id=\"zaschischennyy-rout\">\u0417\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442<\/h4>\n\n\n\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043a TypeScript\u2019\u0443 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u0435\u0442, \u043d\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u0442\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435.<\/p>\n\n\n\n<p>\u0418\u0442\u0430\u043a, \u0432 reach-router \u043c\u044b \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 react-router. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u0430\u043b\u044c\u0448\u0435, \u043b\u0438\u0431\u043e \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0442\u044c.<\/p>\n\n\n\n<p><em>src\/components\/common\/Authenticated.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011121314151617<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { Redirect, RouteComponentProps } from &#8216;@reach\/router&#8217;&nbsp;import { checkAuthStatus } from &#8216;..\/..\/api\/auth&#8217;&nbsp;\/\/ \u043f\u0440\u043e noThrow \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c &#8211; https:\/\/reach.tech\/router\/api\/Redirect&nbsp;const Authenticated: React.FC&amp;lt;RouteComponentProps&amp;gt; = ({ children }) =&amp;gt; {&nbsp;&nbsp;return checkAuthStatus() ? (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;React.Fragment&amp;gt;{children}&amp;lt;\/React.Fragment&amp;gt;&nbsp;&nbsp;) : (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Redirect to=&#8221;\/login&#8221; noThrow={true} \/&amp;gt;&nbsp;&nbsp;)}&nbsp;export { Authenticated }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><em>src\/App.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718192021222324252627282930313233343536373839404142434445<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { Link, RouteComponentProps, Router } from &#8216;@reach\/router&#8217;&nbsp;import { Authenticated } from &#8216;.\/components\/\u0441ommon\/Authenticated&#8217;import { Home } from &#8216;.\/pages\/Home&#8217;import { Login } from &#8216;.\/pages\/Login&#8217;import { News } from &#8216;.\/pages\/News&#8217;import { Profile } from &#8216;.\/pages\/Profile&#8217;&nbsp;import { checkAuthStatus, logout } from &#8216;.\/api\/auth&#8217;&nbsp;import &#8216;.\/App.css&#8217;&nbsp;const App: React.FC&amp;lt;RouteComponentProps&amp;gt; = props =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;div className=&#8221;container&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;h1&amp;gt;TZ #1 with hooks &amp;amp; TypeScript&amp;lt;\/h1&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Link to=&#8221;\/&#8221;&amp;gt;\u0414\u043e\u043c\u043e\u0439&amp;lt;\/Link&amp;gt; &amp;lt;Link to=&#8221;news&#8221;&amp;gt;\u041d\u043e\u0432\u043e\u0441\u0442\u0438&amp;lt;\/Link&amp;gt;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Link to=&#8221;profile&#8221;&amp;gt;\u041f\u0440\u043e\u0444\u0438\u043b\u044c&amp;lt;\/Link&amp;gt;{&#8216; &#8216;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{checkAuthStatus() ? &amp;lt;button onClick={logout}&amp;gt;\u0412\u044b\u0439\u0442\u0438&amp;lt;\/button&amp;gt; : null}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/nav&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{props.children}&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/div&amp;gt;&nbsp;&nbsp;)}&nbsp;const RoutedApp = () =&amp;gt; {&nbsp;&nbsp;return (&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Router&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;App path=&#8221;\/&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Home path=&#8221;\/&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Login path=&#8221;\/login&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;News path=&#8221;\/news&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Authenticated path=&#8221;\/profile&#8221;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;Profile path=&#8221;\/&#8221; \/&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/Authenticated&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/App&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lt;\/Router&amp;gt;&nbsp;&nbsp;)}&nbsp;export { RoutedApp }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0447\u0435\u0433\u043e.<\/p>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043e\u043f\u043b\u043e\u0448\u043d\u043e\u0441\u0442\u044c \u0432 \u0444\u043e\u0440\u043c\u0435 \u043b\u043e\u0433\u0438\u043d\u0430. \u0423\u043a\u0430\u0436\u0438\u0442\u0435&nbsp;<code>type=\"password\"<\/code>&nbsp;\u0434\u043b\u044f \u043f\u043e\u043b\u044f \u0441 \u043f\u0430\u0440\u043e\u043b\u0435\u043c.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441 \u0441 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043e\u0448\u0438\u0431\u043a\u0438. \u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00ab\u043f\u0441\u0435\u0432\u0434\u043e-\u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e\u00bb, \u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u043c\u043e\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0430\u043a\u0435\u0442&nbsp;<a href=\"https:\/\/github.com\/yahoo\/react-intl\">react-intl<\/a>, \u043b\u0438\u0431\u043e&nbsp;<a href=\"https:\/\/github.com\/i18next\/react-i18next\">react-i18next<\/a>.<\/p>\n\n\n\n<p>\u0423 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0449\u0435 \u0442\u043e\u043b\u0438\u043a\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c\u0438:<\/p>\n\n\n\n<p><em>src\/localization\/formErrors.ts<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910<\/td><td>const formErrors = {&nbsp;&nbsp;ru: {&nbsp;&nbsp;&nbsp;&nbsp;incorrect_login_or_password: &#8216;\u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0435 \u0432\u0435\u0440\u043d\u043e&#8217;,&nbsp;&nbsp;},&nbsp;&nbsp;en: {&nbsp;&nbsp;&nbsp;&nbsp;incorrect_login_or_password: &#8216;Incorrect login or password&#8217;,&nbsp;&nbsp;},}&nbsp;export { formErrors }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u0418 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u043c \u0432&nbsp;<code>&lt;Login \/&gt;<\/code><\/p>\n\n\n\n<p><em>src\/pages\/Login.tsx<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718192021222324252627282930313233343536<\/td><td>import * as React from &#8216;react&#8217;&nbsp;import { navigate, RouteComponentProps } from &#8216;@reach\/router&#8217;&nbsp;import { authenticate } from &#8216;..\/api\/auth&#8217;\/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044bimport { formErrors } from &#8216;..\/localization\/formErrors&#8217;import { IUserIdentity } from &#8216;..\/models\/user&#8217;&nbsp;\/\/ \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044f\u0437\u044b\u043a\u0430const lang = &#8216;ru&#8217;&nbsp;const Login: React.FC&amp;lt;RouteComponentProps&amp;gt; = () =&amp;gt; {&nbsp;&nbsp;\/\/ &#8230; \u0432\u044b\u0440\u0435\u0437\u0430\u043d\u043e&nbsp;&nbsp;&nbsp;const onSubmit = (e: React.SyntheticEvent&amp;lt;HTMLFormElement&amp;gt;): void =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault()&nbsp;&nbsp;&nbsp;&nbsp;authenticate(user)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(() =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigate(`\/profile`)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.catch(err =&amp;gt; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err.errorText) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432\u0441\u0435\u0433\u0434\u0430 ru)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setNotification(formErrors[lang][err.errorText])&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ tslint:disable-next-line: no-console&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.warn(&#8216;request problem&#8217;, err)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;}&nbsp;&nbsp;\/\/ &#8230; \u0432\u044b\u0440\u0435\u0437\u0430\u043d\u043e&nbsp;}&nbsp;export { Login }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041e\u0448\u0438\u0431\u043e\u0447\u043a\u0430, \u0441\u044d\u0440.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/2k5zwdyckugmrzpkkrnwrco_sl4-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18921\"\/><\/figure>\n\n\n\n<p>TypeScript \u0432\u043e\u043b\u043d\u0443\u0435\u0442\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0432\u044b\u0432\u0435\u0441\u0442\u0438, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u0435\u043c\u0443 \u0432 \u044d\u0442\u043e\u043c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 index signature (\u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0441\u0441\u044b\u043b\u043e\u043a \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e&nbsp;<a href=\"https:\/\/stackoverflow.com\/a\/32968953\/1916578\">\u043e\u0442\u0432\u0435\u0442 \u043d\u0430 StackOverflow<\/a>).<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516<\/td><td>interface IFormErrors {&nbsp;&nbsp;[key: string]: {&nbsp;&nbsp;&nbsp;&nbsp;[key: string]: string,&nbsp;&nbsp;};}&nbsp;const formErrors: IFormErrors = {&nbsp;&nbsp;ru: {&nbsp;&nbsp;&nbsp;&nbsp;incorrect_login_or_password: &#8216;\u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0435 \u0432\u0435\u0440\u043d\u043e&#8217;,&nbsp;&nbsp;},&nbsp;&nbsp;en: {&nbsp;&nbsp;&nbsp;&nbsp;incorrect_login_or_password: &#8216;Incorrect login or password&#8217;,&nbsp;&nbsp;},}&nbsp;export { formErrors }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u041c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u044f\u0437\u044b\u043a \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u0412\u043d\u0443\u0442\u0440\u0438 \u044f\u0437\u044b\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u0440\u0438\u0447\u0435\u043c \u0438\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0438\u043f\u0430 \u00ab\u0441\u0442\u0440\u043e\u043a\u0430\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/bookflow.ru\/wp-content\/uploads\/2020\/03\/crc7rhb3vhyhbwe9lh1mrnch8qi-min.jpeg\" alt=\"\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u043b\u044f junior frontend \u043d\u0430 TypeScript \u0438 react-hooks\" class=\"wp-image-18922\"\/><\/figure>\n\n\n\n<p>\u2192&nbsp;<a href=\"https:\/\/github.com\/maxfarseer\/tutorial-tz-1-hooks-typescript\/tree\/6-private-route-ready\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n\n\n\n<p>\u041c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 TypeScript. \u041d\u0430 \u0434\u0435\u043b\u0435, TS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0430\u0448\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u00abone\u00bb \u0438\u043b\u0438 \u00abtwo\u00bb (\u0442\u0438\u043f \u2014 union).<\/p>\n\n\n\n<p>\u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u2014 \u0432&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/docs\/home.html\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0414\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c&nbsp;Create-react-app TypeScript&nbsp;\u0432\u0435\u0440\u0441\u0438\u044e, \u043b\u0438\u0431\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f&nbsp;\u043c\u043e\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u0435\u0440\u043e\u043c&nbsp;(\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d reach-router)<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,132],"tags":[147,137],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2100"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2100"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2100\/revisions"}],"predecessor-version":[{"id":2101,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2100\/revisions\/2101"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}