{"id":333516,"date":"2022-05-23T09:01:27","date_gmt":"2022-05-23T09:01:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=333516"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=333516","title":{"rendered":"<span>\u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u041e\u041e\u041f \u0432 TypeScript<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ol>\n<li>\n<p><a href=\"#1\" rel=\"noopener noreferrer nofollow\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#2\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0443\u0442\u0438\u043d\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#3\" rel=\"noopener noreferrer nofollow\">\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#4\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#5\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#6\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433\u0438<\/a><\/p>\n<\/li>\n<\/ol>\n<p><a class=\"anchor\" name=\"1\" id=\"1\"><\/a><\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (\u041e\u041e\u041f) \u0442\u0440\u0443\u0434\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u0442\u0430\u043a\u043e\u043c \u043a\u0430\u043a JavaScript. \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u041e\u041e\u041f \u0438\u0437-\u0437\u0430 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A3%D1%82%D0%B8%D0%BD%D0%B0%D1%8F_%D1%82%D0%B8%D0%BF%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/a>. \u042d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u044b, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0438\u0447\u0442\u043e \u0432 \u044f\u0437\u044b\u043a\u0435 \u043d\u0435 \u043d\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u0440\u043e\u0434\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430, \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0431\u043b\u0430\u0433\u0438\u043c\u0438 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u043c\u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u0438\u043d \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u044b\u0439 \u0431\u0435\u0441\u043f\u043e\u0440\u044f\u0434\u043e\u043a.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043e\u0442\u0440\u044b\u0432\u043a\u0435 \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u0438\u043c\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u041e\u041e\u041f \u0432 TypeScript, \u043f\u043e\u043a\u0430\u0437\u0430\u0432, \u043a\u0430\u043a \u044f\u0437\u044b\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u0443\u0447\u0443 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430 \u0438 \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438. \u041c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0443\u0442\u0438\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0442\u0440\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c: <strong>\u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438<\/strong>, <strong>\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e<\/strong> \u0438 <strong>\u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c\u0443<\/strong>.<\/p>\n<p>    \u0413\u043e\u0442\u043e\u0432\u044b? \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n<p><a class=\"anchor\" name=\"2\" id=\"2\"><\/a><\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0443\u0442\u0438\u043d\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u0434 \u0441\u0430\u043c\u0438, \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0432 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0432 \u043a\u043e\u0434 \u0432 <a href=\"https:\/\/www.typescriptlang.org\/play\" rel=\"noopener noreferrer nofollow\">TypeScript Playground<\/a>. \u0426\u0435\u043b\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435.<\/p>\n<p> \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">interface Todo {   title: string;   description?: string; }   const todo1 = {   title: \"organize desk\",   extra: \"metadata\", \/\/ duck typing is allowed! };   const updateTodo = (   todo: Todo,   fieldsToUpdate: Partial&lt;Todo> \/\/ allow partial updates ) => ({ ...todo, ...fieldsToUpdate });   const result1 = updateTodo(todo1, {   description: \"throw out trash\", });   const todo2 = {   ...todo1,   description: \"clean up\", \/\/ call bombs without description };   const updateRequiredTodo = (   todo: Required&lt;Todo>,   fieldsToUpdate: Partial&lt;Todo> ): Required&lt;Todo> => ({ ...todo, ...fieldsToUpdate });   const result2 = updateRequiredTodo(todo2, {   description: \"throw out trash\", });<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>Todo<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0441 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>description<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u0412\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u043d\u0430\u043a <code>?<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 TypeScript, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 &#8212; \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u043e\u043a\u0440\u0443\u0433 <code>Required&lt;Todo><\/code> , \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438. \u0412 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u041e\u041e\u041f \u0432\u0430\u0436\u043d\u0430 <em>\u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445<\/em> \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0417\u0434\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0446\u0435\u043b\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u043e <code>Partial&lt;Todo> <\/code>\u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c. \u042d\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>fieldsToUpdate<\/code> . \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>updateRequiredTodo <\/code>\u044f\u0432\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442 \u0442\u0438\u043f \u0432\u044b\u0432\u043e\u0434\u0430 <code>Required&lt;Todo><\/code> , \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044f \u0442\u0438\u043f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>extra<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0432 <code>todo1<\/code>. \u042d\u0442\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 \u0442\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u0430, \u0447\u0442\u043e TypeScript \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c JavaScript, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f. \u0411\u0435\u0437 \u044f\u0432\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u0443 TypeScript \u043d\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430, \u043a\u0440\u043e\u043c\u0435 \u043a\u0430\u043a \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u043c\u0443. \u041f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u043d\u0430 TypeScript, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044f\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0440\u0438 \u0441\u0442\u043e\u043b\u043f\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p><a class=\"anchor\" name=\"3\" id=\"3\"><\/a><\/p>\n<h2>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/h2>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0442\u043e\u043b\u043f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. TypeScript \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<pre><code class=\"javascript\">class Base {   private hiddenA = 0;   #hiddenB = 0;     printInternals() {     console.log(this.hiddenA); \/\/ works     console.log(this.#hiddenB); \/\/ works   } }   const obj = new Base(); console.log(obj.hiddenA); \/\/ these two bomb console.log(obj.#hiddenB);<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043b\u0435 <code>hiddenA<\/code> \u0438\u043c\u0435\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 <code>Base<\/code>, \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 JS&#8217;\u0443 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e<code>in<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0430\u0451\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u0430\u0436\u0435 \u043a \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c \u043f\u043e\u043b\u044f\u043c. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0436\u0435\u0441\u0442\u043a\u0438\u0439 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 <code>#<\/code> \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0433\u043e.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 &#8212; \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0432 \u0432\u0430\u0448\u0435\u043c \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435 TypeScript. \u0423\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u0442\u0438\u043f\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>Pick&lt;Type, Keys><\/code>, <code>Omit&lt;Type, Keys><\/code>, <code>Readonly&lt;Type><\/code> \u0438 <code>NonNullable&lt;Type><\/code> \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u044b.<\/p>\n<pre><code class=\"javascript\">interface Todo {   title: string;   description?: string; \/\/ string | undefined   completed: boolean; }   type TodoPreview1 = Pick&lt;Todo, \"title\" | \"completed\">;   const todo1: TodoPreview1 = {   \/\/explicit typing   title: \"Clean room\",   completed: false,   description: \"x\", \/\/ duck typing is NOT allowed };   type TodoPreview2 = Omit&lt;Todo, \"description\" | \"completed\">;   const todo2: TodoPreview2 = {   title: \"Clean room\", };   const todo3: Readonly&lt;Todo> = {   title: \"Delete inactive users\",   completed: true, };   todo3.completed = false; \/\/ bombs   const todo4: Todo = {   ...todo1,   description: \"Doing shores is fun\", };   const description: NonNullable&lt;string | undefined> =   \/\/ bombs without null coalescing   todo4.description ?? \"\";<\/code><\/pre>\n<p>\u0423\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Pick<\/code> \u0438\u043b\u0438 <code>Omit<\/code> \u0432\u044b\u0440\u0435\u0437\u0430\u044e\u0442 \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0415\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0432\u0435\u0434\u0435\u043d \u044f\u0432\u043d\u043e, \u0442\u043e \u0432\u0432\u043e\u0434 \u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442 \u0442\u0438\u043f\u044b \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u0438 \u043a\u0443\u0431\u0438\u043a\u0438 \u0438 \u0441\u0443\u0436\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Readonly<\/code>. \u041b\u044e\u0431\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0441\u0431\u043e\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0437\u0430\u0449\u0438\u0442\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u0430\u043a\u0436\u0435 <code>Object.freeze<\/code>. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u0437\u0430\u0449\u0438\u0449\u0430\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0442\u0438\u043f\u0430\u043c\u0438.<\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438, \u0447\u0442\u043e <code>undefined<\/code> \u0438\u043b\u0438 <code>null<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u041e\u041e\u041f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b <em>\u0442\u0438\u043f\u044b \u0441 \u043d\u0443\u043b\u0435\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c<\/em>. \u0427\u0442\u043e \u0436, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c nullable \u043e\u0431\u044a\u0435\u043a\u0442\u044b &#8212; \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0447\u0442\u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u043d\u0433\u043e, \u0430 \u043f\u043e\u0442\u043e\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043b\u044e\u0434\u044f\u043c, \u0447\u0442\u043e \u0432\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0438\u0445 \u043d\u043e\u0441\u0438\u0442\u044c! <sub>(\u041e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430: \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, &#171;is like selling street mangos, then telling people you never intended to carry any&#187;)<\/sub>.<\/p>\n<p><code>null<\/code> &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443. <code>NonNullable<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u0430\u043c \u0431\u044b\u0442\u044c \u0447\u0435\u0441\u0442\u043d\u044b\u043c \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u0442\u0438\u043f\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0445 \u043d\u0435\u0443\u0434\u0430\u0447. <\/p>\n<p><a class=\"anchor\" name=\"4\" id=\"4\"><\/a><\/p>\n<h2>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u0442\u0438\u043f\u043e\u0432 \u0432\u0438\u0434\u0430 <em>is-a<\/em><sub>(Sonar is a Pingable)<\/sub>. \u042d\u0442\u0430 \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0435\u0441\u0442\u044c <code>Pingable<\/code> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>ping<\/code>. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u043d\u0430\u0440 \u0431\u044b\u043b \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u043b\u044f \u043f\u0438\u043d\u0433\u0430, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043e \u0441\u043e\u043d\u0430\u0440\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">interface Pingable {   ping(): void; }   class Sonar implements Pingable {   ping() {     console.log(\"sonar ping!\");   } }<\/code><\/pre>\n<p>TypeScript \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0447\u0443\u0434\u043b\u0438\u0432\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0434\u0432\u0430 \u0442\u0438\u043f\u0430, \u0441\u043a\u0430\u0436\u0435\u043c, <code>Colorful<\/code> \u0438 <code>Circle<\/code>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0441\u0443\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442\u0430 \u0442\u0438\u043f\u0430. \u041f\u0440\u0435\u0434\u0438\u043a\u0430\u0442 <code>circle is Circle<\/code> \u0441\u0443\u0436\u0430\u0435\u0442 \u0442\u0438\u043f, \u0447\u0442\u043e\u0431\u044b \u043b\u043e\u0433\u0438\u043a\u0430 \u043c\u043e\u0433\u043b\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0435\u0442\u0432\u0438\u0442\u044c\u0441\u044f. \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443 \u043d\u0443\u0436\u0435\u043d \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0443\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0434\u0438\u0437\u044a\u044e\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">type Colorful = {   color: string; };   type Circle = {   radius: number; };   type ColorfulCircle = Colorful | Circle; \/\/ union   function isCircle(circle: ColorfulCircle): circle is Circle {   return \"radius\" in circle; }   function draw(circle: ColorfulCircle) {   if (isCircle(circle)) {     \/\/ branch logic     console.log(`Radius was ${circle.radius}`); \/\/ ok   } else {     console.log(`Color was ${circle.color}`);   } }   draw({ color: \"blue\" }); draw({ radius: 42 });<\/code><\/pre>\n<p>\u041d\u0438\u0436\u0435, <code>Colorful<\/code> \u0438 Circle <code>\u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438\u0437 \u043e\u0431\u043e\u0438\u0445. \u042d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<pre><code class=\"javascript\">type Colorful = {   color: string; };   type Circle = {   radius: number; };   type ColorfulCircle = Colorful &amp; Circle; \/\/ intersection   function draw(circle: ColorfulCircle) {   console.log(`Radius was ${circle.radius}`); \/\/ ok   console.log(`Color was ${circle.color}`); }   draw({ color: \"blue\", radius: 42 });<\/code><\/pre>\n<p>\u0421 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c <code>this<\/code> \u0432 JavaScript \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. TypeScript \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0432\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u0432 \u043a\u043b\u0430\u0441\u0441 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0443 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">abstract class Box {   content: string = \"\";     sameAs(other: this) {     return other.content === this.content;   }     isDerivedBox(): this is DerivedBox {     return this instanceof DerivedBox;   } }   class DerivedBox extends Box {   otherContent: string = \"?\"; }   const base = new Box(); \/\/ bombs const derived = new DerivedBox(); derived.isDerivedBox(); \/\/ true derived.sameAs(derived as Box); \/\/ bombs<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u0438\u043f <code>this is DerivedBox<\/code> \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0442\u0438\u043f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>isDerivedBox<\/code>. \u0421\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441 \u0441\u0443\u0436\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>instanceof<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0442\u0438\u043f \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c, \u0430 \u043d\u0435 \u0434\u0432\u0438\u0436\u0443\u0449\u0435\u0439\u0441\u044f \u0446\u0435\u043b\u044c\u044e.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u041e\u041e\u041f \u0441 \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043b\u0430\u0441\u0441 <code>Box<\/code> \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u043c, \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f, \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u0430. \u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u0441 \u043e\u0431\u0449\u0438\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0445\u043e\u0442\u0435\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0431\u043e\u0433\u0430\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"5\" id=\"5\"><\/a><\/p>\n<h2>\u041f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f ad hoc (&#171;\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e&#187;) \u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <code>add<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<pre><code class=\"javascript\">interface GenericAdd&lt;AddType> {   add: (x: AddType, y: AddType) => AddType; }   class GenericNumber implements GenericAdd&lt;number> {   add(x: number, y: number) {     return x + y;   } \/\/ number + number }   class GenericString implements GenericAdd&lt;string> {   add(x: string, y: string) {     return x + y;   } \/\/ string + string }   const genericNumber = new GenericNumber(); genericNumber.add(1, 2); \/\/ 3   const genericString = new GenericString(); genericString.add(\"Hello\", \", Mammals!\"); \/\/ Hello, Mammals!<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u043e \u0442\u0438\u043f\u0435 \u043a\u0430\u043a \u043e <code>Record<\/code>, \u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c <em>row-polymorphic<\/em> <code>Record<\/code> \u0441 \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u0430. TypeScript \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Partial<\/code>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u044f\u0432\u043d\u043e, \u0430 \u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>beta<\/code> \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c <code>AType<\/code>.<\/p>\n<pre><code class=\"javascript\">const subset: Partial&lt;AType> = {   x: 2,   y: 3,   beta: \"bomb\", \/\/ not allowed };<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0441\u043e\u043f\u0440\u043e\u0442\u0438\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u041b\u0438\u0441\u043a\u043e\u0432\u0430 \u0441 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c &#171;\u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440&#187;. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0441\u0447\u0435\u0442 \u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0435\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441 <code>Barista<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0447\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043e\u0440\u0442\u0430 \u043a\u043e\u0444\u0435. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0437\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u043e\u0432\u044b: \u0443 \u0431\u0430\u0440\u0438\u0441\u0442\u044b \u0435\u0441\u0442\u044c \u0447\u0430\u0448\u043a\u0430 \u043a\u043e\u0444\u0435, \u0447\u0442\u043e \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u041e\u041e\u041f \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u0440\u043e\u0442\u0438\u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u041a\u0430\u043a \u0438 \u0432 \u0447\u0430\u0448\u043a\u0435 \u043a\u043e\u0444\u0435, \u0432 \u0433\u043e\u0442\u043e\u0432\u044f\u0449\u0438\u0439\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043c\u043e\u043b\u043e\u043a\u043e, \u0441\u0430\u0445\u0430\u0440 \u0438\u043b\u0438 \u043f\u043e\u0441\u044b\u043f\u043a\u0430. \u041c\u043e\u0439 \u0431\u0430\u0440\u0438\u0441\u0442\u0430 \u0437\u0430\u043d\u044f\u0442, \u0438 \u0443 \u043d\u0435\u0433\u043e \u043d\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0439 \u0443\u0431\u043e\u0433\u0438\u0439 \u043a\u043e\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u043c \u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">interface Coffee {   getCost(): number;   getIngredients(): string; }   class SimpleCoffee implements Coffee {   getCost() {     return 8;   }     getIngredients() {     return \"Coffee\";   } }   abstract class CoffeeDecorator implements Coffee {   constructor(private readonly decoratedCoffee: Coffee) {}     getCost() {     return this.decoratedCoffee.getCost();   }     getIngredients() {     return this.decoratedCoffee.getIngredients();   } }   class WithMilk extends CoffeeDecorator {   constructor(private readonly c: Coffee) {     super(c);   }     getCost() {     return super.getCost() + 2.5;   }     getIngredients() {     return super.getIngredients() + \", Milk\";   } }   class WithSprinkles extends CoffeeDecorator {   constructor(private readonly c: Coffee) {     super(c);   }     getCost() {     return super.getCost() + 1.7;   }     getIngredients() {     return super.getIngredients() + \", Sprinkles\";   } }   class WithSugar extends CoffeeDecorator {   constructor(private readonly c: Coffee) {     super(c);   }     getCost() {     return super.getCost() + 1;   }     getIngredients() {     return super.getIngredients() + \", Sugar\";   } }<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>Coffee<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442, \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432\u043e \u0432\u0441\u0435\u043c \u043a\u043e\u0434\u0435, \u0438 \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0430\u0448\u043a\u0430 \u043a\u043e\u0444\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043d\u0435\u0433. \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 8 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0421\u0428\u0410, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0432\u0430\u043b\u044e\u0442\u044b \u0421\u0428\u0410 \u0438 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0438\u043d\u0444\u043b\u044f\u0446\u0438\u044e, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0432 <code>SimpleCoffee<\/code>.<\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u041b\u0438\u0441\u043a\u043e\u0432\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u043e\u0434\u0442\u0438\u043f\u044b <code>CoffeeDecorator<\/code> \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c \u0438 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 TypeScript \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432 \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<pre><code class=\"javascript\">class Barista {   constructor(private readonly cupOfCoffee: Coffee) {}     orders() {     this.orderUp(this.cupOfCoffee);     let cup: Coffee = new WithMilk(this.cupOfCoffee);     this.orderUp(cup);     cup = new WithSugar(cup);     this.orderUp(cup);     cup = new WithSprinkles(cup);     this.orderUp(cup);   }     private orderUp(c: Coffee) {     console.log(       \"Cost: \" + c.getCost() + \"; Ingredients: \" + c.getIngredients()     );   } }   const barista = new Barista(new SimpleCoffee()); barista.orders();<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u041e\u041e\u041f: \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0445 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u043c\u043e\u0439 \u0431\u0430\u0440\u0438\u0441\u0442\u0430 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0447\u0430\u0448\u043a\u0443 \u043a\u043e\u0444\u0435.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043d\u0443\u0441\u0430 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441 \u0431\u0430\u0440\u0438\u0441\u0442\u0430 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043c\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 <code>Coffee<\/code>, \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p><a class=\"anchor\" name=\"6\" id=\"6\"><\/a><\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0442\u0440\u0438 \u0441\u0442\u043e\u043b\u043f\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b \u0443\u0442\u0438\u043d\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>\u0412\u044b \u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a TypeScript \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0441\u0438\u043b\u0443 \u0432\u043e\u043b\u0438 \u0438\u043b\u0438 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0443. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u041e\u041e\u041f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0437\u0430\u043f\u0430\u0445\u043e\u0432 \u043a\u043e\u0434\u0430. \u0412\u0430\u0448\u0438 \u0442\u0438\u043f\u044b \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0442\u0430\u0442\u044c \u0441\u043e\u044e\u0437\u043d\u0438\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u0447\u0438\u0441\u0442\u044b\u043c \u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u043c \u043e\u0442 \u0434\u043e\u0441\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0421\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0438\u043d\u0433\u0430!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/667156\/\"> https:\/\/habr.com\/ru\/post\/667156\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ol>\n<li>\n<p><a href=\"#1\" rel=\"noopener noreferrer nofollow\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#2\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0443\u0442\u0438\u043d\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#3\" rel=\"noopener noreferrer nofollow\">\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#4\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#5\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#6\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433\u0438<\/a><\/p>\n<\/li>\n<\/ol>\n<p><a class=\"anchor\" name=\"1\" id=\"1\"><\/a><\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (\u041e\u041e\u041f) \u0442\u0440\u0443\u0434\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u0442\u0430\u043a\u043e\u043c \u043a\u0430\u043a JavaScript. \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u041e\u041e\u041f \u0438\u0437-\u0437\u0430 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A3%D1%82%D0%B8%D0%BD%D0%B0%D1%8F_%D1%82%D0%B8%D0%BF%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/a>. \u042d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u044b, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0438\u0447\u0442\u043e \u0432 \u044f\u0437\u044b\u043a\u0435 \u043d\u0435 \u043d\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u0440\u043e\u0434\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430, \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0431\u043b\u0430\u0433\u0438\u043c\u0438 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u043c\u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u0438\u043d \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u044b\u0439 \u0431\u0435\u0441\u043f\u043e\u0440\u044f\u0434\u043e\u043a.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043e\u0442\u0440\u044b\u0432\u043a\u0435 \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u0438\u043c\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u041e\u041e\u041f \u0432 TypeScript, \u043f\u043e\u043a\u0430\u0437\u0430\u0432, \u043a\u0430\u043a \u044f\u0437\u044b\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u0443\u0447\u0443 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430 \u0438 \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438. \u041c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0443\u0442\u0438\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0442\u0440\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c: <strong>\u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438<\/strong>, <strong>\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e<\/strong> \u0438 <strong>\u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c\u0443<\/strong>.<\/p>\n<p>    \u0413\u043e\u0442\u043e\u0432\u044b? \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n<p><a class=\"anchor\" name=\"2\" id=\"2\"><\/a><\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0443\u0442\u0438\u043d\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043a\u043e\u0434 \u0441\u0430\u043c\u0438, \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0432 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0432 \u043a\u043e\u0434 \u0432 <a href=\"https:\/\/www.typescriptlang.org\/play\" rel=\"noopener noreferrer nofollow\">TypeScript Playground<\/a>. \u0426\u0435\u043b\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435.<\/p>\n<p> \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">interface Todo {   title: string;   description?: string; }   const todo1 = {   title: \"organize desk\",   extra: \"metadata\", \/\/ duck typing is allowed! };   const updateTodo = (   todo: Todo,   fieldsToUpdate: Partial&lt;Todo> \/\/ allow partial updates ) => ({ ...todo, ...fieldsToUpdate });   const result1 = updateTodo(todo1, {   description: \"throw out trash\", });   const todo2 = {   ...todo1,   description: \"clean up\", \/\/ call bombs without description };   const updateRequiredTodo = (   todo: Required&lt;Todo>,   fieldsToUpdate: Partial&lt;Todo> ): Required&lt;Todo> => ({ ...todo, ...fieldsToUpdate });   const result2 = updateRequiredTodo(todo2, {   description: \"throw out trash\", });<\/code><\/pre>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>Todo<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0441 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>description<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u0412\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u043d\u0430\u043a <code>?<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 TypeScript, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 &#8212; \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u043e\u043a\u0440\u0443\u0433 <code>Required&lt;Todo><\/code> , \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438. \u0412 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u041e\u041e\u041f \u0432\u0430\u0436\u043d\u0430 <em>\u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445<\/em> \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0417\u0434\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0446\u0435\u043b\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u043e <code>Partial&lt;Todo> <\/code>\u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c. \u042d\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>fieldsToUpdate<\/code> . \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>updateRequiredTodo <\/code>\u044f\u0432\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442 \u0442\u0438\u043f \u0432\u044b\u0432\u043e\u0434\u0430 <code>Required&lt;Todo><\/code> , \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044f \u0442\u0438\u043f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>extra<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0432 <code>todo1<\/code>. \u042d\u0442\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 \u0442\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u0430, \u0447\u0442\u043e TypeScript \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c JavaScript, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f. \u0411\u0435\u0437 \u044f\u0432\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u0443 TypeScript \u043d\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430, \u043a\u0440\u043e\u043c\u0435 \u043a\u0430\u043a \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u043c\u0443. \u041f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u043d\u0430 TypeScript, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044f\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0440\u0438 \u0441\u0442\u043e\u043b\u043f\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p><a class=\"anchor\" name=\"3\" id=\"3\"><\/a><\/p>\n<h2>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/h2>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0442\u043e\u043b\u043f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. TypeScript \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<pre><code class=\"javascript\">class Base {   private hiddenA = 0;   #hiddenB = 0;     printInternals() {     console.log(this.hiddenA); \/\/ works     console.log(this.#hiddenB); \/\/ works   } }   const obj = new Base(); console.log(obj.hiddenA); \/\/ these two bomb console.log(obj.#hiddenB);<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043b\u0435 <code>hiddenA<\/code> \u0438\u043c\u0435\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 <code>Base<\/code>, \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 JS&#8217;\u0443 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e<code>in<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0430\u0451\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u0430\u0436\u0435 \u043a \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c \u043f\u043e\u043b\u044f\u043c. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0436\u0435\u0441\u0442\u043a\u0438\u0439 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 <code>#<\/code> \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0433\u043e.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 &#8212; \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0432 \u0432\u0430\u0448\u0435\u043c \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435 TypeScript. \u0423\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u0442\u0438\u043f\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>Pick&lt;Type, Keys><\/code>, <code>Omit&lt;Type, Keys><\/code>, <code>Readonly&lt;Type><\/code> \u0438 <code>NonNullable&lt;Type><\/code> \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u044b.<\/p>\n<pre><code class=\"javascript\">interface Todo {   title: string;   description?: string; \/\/ string | undefined   completed: boolean; }   type TodoPreview1 = Pick&lt;Todo, \"title\" | \"completed\">;   const todo1: TodoPreview1 = {   \/\/explicit typing   title: \"Clean room\",   completed: false,   description: \"x\", \/\/ duck typing is NOT allowed };   type TodoPreview2 = Omit&lt;Todo, \"description\" | \"completed\">;   const todo2: TodoPreview2 = {   title: \"Clean room\", };   const todo3: Readonly&lt;Todo> = {   title: \"Delete inactive users\",   completed: true, };   todo3.completed = false; \/\/ bombs   const todo4: Todo = {   ...todo1,   description: \"Doing shores is fun\", };   const description: NonNullable&lt;string | undefined> =   \/\/ bombs without null coalescing   todo4.description ?? \"\";<\/code><\/pre>\n<p>\u0423\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Pick<\/code> \u0438\u043b\u0438 <code>Omit<\/code> \u0432\u044b\u0440\u0435\u0437\u0430\u044e\u0442 \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0415\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0432\u0435\u0434\u0435\u043d \u044f\u0432\u043d\u043e, \u0442\u043e \u0432\u0432\u043e\u0434 \u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442 \u0442\u0438\u043f\u044b \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u0438 \u043a\u0443\u0431\u0438\u043a\u0438 \u0438 \u0441\u0443\u0436\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Readonly<\/code>. \u041b\u044e\u0431\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0441\u0431\u043e\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0437\u0430\u0449\u0438\u0442\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u0430\u043a\u0436\u0435 <code>Object.freeze<\/code>. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u0437\u0430\u0449\u0438\u0449\u0430\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0442\u0438\u043f\u0430\u043c\u0438.<\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438, \u0447\u0442\u043e <code>undefined<\/code> \u0438\u043b\u0438 <code>null<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u041e\u041e\u041f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b <em>\u0442\u0438\u043f\u044b \u0441 \u043d\u0443\u043b\u0435\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c<\/em>. \u0427\u0442\u043e \u0436, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c nullable \u043e\u0431\u044a\u0435\u043a\u0442\u044b &#8212; \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0447\u0442\u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u043d\u0433\u043e, \u0430 \u043f\u043e\u0442\u043e\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043b\u044e\u0434\u044f\u043c, \u0447\u0442\u043e \u0432\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0438\u0445 \u043d\u043e\u0441\u0438\u0442\u044c! <sub>(\u041e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430: \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, &#171;is like selling street mangos, then telling people you never intended to carry any&#187;)<\/sub>.<\/p>\n<p><code>null<\/code> &#8212; \u044d\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443. <code>NonNullable<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u0430\u043c \u0431\u044b\u0442\u044c \u0447\u0435\u0441\u0442\u043d\u044b\u043c \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u0442\u0438\u043f\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0445 \u043d\u0435\u0443\u0434\u0430\u0447. <\/p>\n<p><a class=\"anchor\" name=\"4\" id=\"4\"><\/a><\/p>\n<h2>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u0442\u0438\u043f\u043e\u0432 \u0432\u0438\u0434\u0430 <em>is-a<\/em><sub>(Sonar is a Pingable)<\/sub>. \u042d\u0442\u0430 \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0435\u0441\u0442\u044c <code>Pingable<\/code> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>ping<\/code>. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u043d\u0430\u0440 \u0431\u044b\u043b \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u043b\u044f \u043f\u0438\u043d\u0433\u0430, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043e \u0441\u043e\u043d\u0430\u0440\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">interface Pingable {   ping(): void; }   class Sonar implements Pingable {   ping() {     console.log(\"sonar ping!\");   } }<\/code><\/pre>\n<p>TypeScript \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0447\u0443\u0434\u043b\u0438\u0432\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0434\u0432\u0430 \u0442\u0438\u043f\u0430, \u0441\u043a\u0430\u0436\u0435\u043c, <code>Colorful<\/code> \u0438 <code>Circle<\/code>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0441\u0443\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442\u0430 \u0442\u0438\u043f\u0430. \u041f\u0440\u0435\u0434\u0438\u043a\u0430\u0442 <code>circle is Circle<\/code> \u0441\u0443\u0436\u0430\u0435\u0442 \u0442\u0438\u043f, \u0447\u0442\u043e\u0431\u044b \u043b\u043e\u0433\u0438\u043a\u0430 \u043c\u043e\u0433\u043b\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0435\u0442\u0432\u0438\u0442\u044c\u0441\u044f. \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443 \u043d\u0443\u0436\u0435\u043d \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0443\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0434\u0438\u0437\u044a\u044e\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">type Colorful = {   color: string; };   type Circle = {   radius: number; };   type ColorfulCircle = Colorful | Circle; \/\/ union   function isCircle(circle: ColorfulCircle): circle is Circle {   return \"radius\" in circle; }   function draw(circle: ColorfulCircle) {   if (isCircle(circle)) {     \/\/ branch logic     console.log(`Radius was ${circle.radius}`); \/\/ ok   } else {     console.log(`Color was ${circle.color}`);   } }   draw({ color: \"blue\" }); draw({ radius: 42 });<\/code><\/pre>\n<p>\u041d\u0438\u0436\u0435, <code>Colorful<\/code> \u0438 Circle <code>\u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438\u0437 \u043e\u0431\u043e\u0438\u0445. \u042d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<pre><code class=\"javascript\">type Colorful = {   color: string; };   type Circle = {   radius: number; };   type ColorfulCircle = Colorful &amp; Circle; \/\/ intersection   function draw(circle: ColorfulCircle) {   console.log(`Radius was ${circle.radius}`); \/\/ ok   console.log(`Color was ${circle.color}`); }   draw({ color: \"blue\", radius: 42 });<\/code><\/pre>\n<p>\u0421 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c <code>this<\/code> \u0432 JavaScript \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. TypeScript \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0432\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u0432 \u043a\u043b\u0430\u0441\u0441 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0443 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">abstract class Box {   content: string = \"\";     sameAs(other: this) {     return other.content === this.content;   }     isDerivedBox(): this is DerivedBox {     return this instanceof DerivedBox;   } }   class DerivedBox extends Box {   otherContent: string = \"?\"; }   const base = new Box(); \/\/ bombs const derived = new DerivedBox(); derived.isDerivedBox(); \/\/ true derived.sameAs(derived as Box); \/\/ bombs<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u0438\u043f <code>this is DerivedBox<\/code> \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0442\u0438\u043f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>isDerivedBox<\/code>. \u0421\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441 \u0441\u0443\u0436\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>instanceof<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0442\u0438\u043f \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c, \u0430 \u043d\u0435 \u0434\u0432\u0438\u0436\u0443\u0449\u0435\u0439\u0441\u044f \u0446\u0435\u043b\u044c\u044e.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u041e\u041e\u041f \u0441 \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043b\u0430\u0441\u0441 <code>Box<\/code> \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u043c, \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f, \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u0430. \u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u0441 \u043e\u0431\u0449\u0438\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0445\u043e\u0442\u0435\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0431\u043e\u0433\u0430\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"5\" id=\"5\"><\/a><\/p>\n<h2>\u041f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f ad hoc (&#171;\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e&#187;) \u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <code>add<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<pre><code class=\"javascript\">interface GenericAdd&lt;AddType> {   add: (x: AddType, y: AddType) => AddType; }   class GenericNumber implements GenericAdd&lt;number> {   add(x: number, y: number) {     return x + y;   } \/\/ number + number }   class GenericString implements GenericAdd&lt;string> {   add(x: string, y: string) {     return x + y;   } \/\/ string + string }   const genericNumber = new GenericNumber(); genericNumber.add(1, 2); \/\/ 3   const genericString = new GenericString(); genericString.add(\"Hello\", \", Mammals!\"); \/\/ Hello, Mammals!<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u043e \u0442\u0438\u043f\u0435 \u043a\u0430\u043a \u043e <code>Record<\/code>, \u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c <em>row-polymorphic<\/em> <code>Record<\/code> \u0441 \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u0430. TypeScript \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Partial<\/code>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u044f\u0432\u043d\u043e, \u0430 \u0443\u0442\u0438\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>bet<\/code><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-333516","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=333516"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333516\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}