{"id":312711,"date":"2020-11-07T15:00:43","date_gmt":"2020-11-07T15:00:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=312711"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=312711","title":{"rendered":"Vue 3 \u043d\u0430 Typescript"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tc\/h_\/-d\/tch_-dpmujwnjv8ldhjfs_hmmf0.png\" alt=\"vue3+ts\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c Typescript \u0440\u0430\u0441\u0442\u0435\u0442 \u0434\u0435\u043d\u044c \u043e\u0442\u043e \u0434\u043d\u044f. Javascript \u043d\u0435\u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a(\u0438\u043b\u0438 \u0441\u043b\u0430\u0431\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0442\u043e\u0447\u043d\u0435\u0435), \u0438 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0438 \u0441\u0442\u0440\u043e\u043a\u0443, \u0438 \u0447\u0438\u0441\u043b\u043e, \u0438 \u0434\u0430\u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u044f\u0437\u044b\u043a \u0433\u0438\u0431\u043a\u0438\u043c, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439, \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u0435\u0434\u0435\u0442 \u043a \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u043e\u0448\u0438\u0431\u043a\u0430\u043c. Typescript \u0441\u043e\u0437\u0434\u0430\u043d, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. Vue \u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043e\u0442 \u043c\u043e\u0434\u044b, \u0438 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0431\u044b\u043b\u0430 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044f\u0437\u044b\u043a\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 Typescript \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435, \u0447\u0435\u043c \u0431\u044b\u043b \u0440\u0430\u043d\u044c\u0448\u0435. \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u043e\u0432\u043e\u0434 \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0447\u0435\u043c\u0443-\u0442\u043e \u043d\u043e\u0432\u043e\u043c\u0443, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u0432 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u043a \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u044f\u043c \u043e\u043d \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0447\u0430\u0449\u0435 \u0438 \u0447\u0430\u0449\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b <a href=\"https:\/\/habr.com\/ru\/post\/520248\/\">\u0440\u0430\u043d\u0435\u0435<\/a>, \u043d\u0430 Vue 3 \u0438 Typescript \u0438 \u0432\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 Vue-Router \u0438 Vuex(\u043a\u0440\u0438\u0442\u0438\u043a\u0438, \u0432\u044b \u0431\u044b\u043b\u0438 \u0443\u0441\u043b\u044b\u0448\u0430\u043d\u044b).<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0437\u0430\u0431\u044b\u043b, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435: \u043e\u0441\u0432\u0435\u0436\u0438\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u044c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/habr.com\/ru\/post\/520248\/\">\u0437\u0434\u0435\u0441\u044c<\/a> \u0438 <a href=\"https:\/\/github.com\/harmyderoman\/vuejs-todo-app\/blob\/master\/README.md#%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5\" rel=\"nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u043d\u0438\u044e \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/post\/520248\/\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u043b\u043e\u0432 \u043a \u0434\u0435\u043b\u0443!<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0432\u0430\u0448 <a href=\"https:\/\/cli.vuejs.org\/guide\/\" rel=\"nofollow\">Vue CLI<\/a>. \u042f \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u0432\u044b \u0434\u0430\u0432\u043d\u043e \u0435\u0433\u043e \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0438, \u0430 \u0442\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0444\u0438\u0447 \u0437\u0430\u0432\u0435\u0437\u043b\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 Typescript. <\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm update -g @vue\/cli<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043f\u0430\u043f\u043e\u0447\u043a\u0443, \u0433\u0434\u0435 \u0432\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438 \u043d\u0430\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">vue create tsvue-todo-app<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0445\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0440\u0435\u0442\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442: <code>Manually select features<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430\u043c\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>(*) TypeScript<\/li>\n<li>(*) Router<\/li>\n<li>(*) Vuex<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e Vue \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430: <code>3.x (Preview)<\/code><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0446\u0438\u0438 \u043a\u0430\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043e. <\/p>\n<p>  <\/p>\n<p>\u0416\u0434\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">cd tsvue-todo-app<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043b\u044e\u0431\u0438\u043c\u044b\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>  <\/p>\n<p>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u043f\u0430\u043f\u043e\u043a <code>components<\/code>, <code>assets<\/code> \u0438 <code>views<\/code>. \u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0444\u0430\u0439\u043b App.vue \u043e\u0442 \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043d\u0430\u0448\u0438\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 <code>store<\/code>. \u0415\u0433\u043e, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430 typescript. \u041c\u043e\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u044f, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u0442\u0435\u0445, \u043a\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u0441 Vue \u0438 javascript, \u043d\u043e \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e typescript. <\/p>\n<p>  <\/p>\n<blockquote><p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e typescript. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0438\u043b\u0438 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u043b\u044f \u0434\u0436\u0430\u0432\u0430\u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043a\u043e\u0434 \u043d\u0430 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0442\u043e \u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0431\u044b\u043b\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u044b, \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 javascript. \u0421\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 ts, \u043a\u0430\u043a \u043d\u0430 js, \u0438 \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0411\u0440\u0430\u0443\u0437\u0435\u0440, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 typescript, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 javascript, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438 \u0438\u0434\u0435\u0442 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f, Vue CLI \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b \u0432\u0441\u0435 \u0434\u043b\u044f \u0432\u0430\u0441. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 typescript \u0432\u043e Vue, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 <a href=\"https:\/\/v3.vuejs.org\/guide\/typescript-support.html\" rel=\"nofollow\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/a> \u043e\u0442 \u0441\u0430\u043c\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430(\u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c), \u0438 \u0432\u044b\u0443\u0447\u0438\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/intro.html\" rel=\"nofollow\">typescript<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e Vue \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p><\/blockquote>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432 \u0432 typescript. \u0421 \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0435\u043a\u0442\u0440\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u043a \u043b\u044e\u0431\u044f\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a\u0438 \u0441\u0442\u0440\u043e\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432(\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a C# \u0438 Java). \u041c\u044b \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/interfaces.html\" rel=\"nofollow\">interface<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0434\u0435\u043b \u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0434\u0435\u043b. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <code>models<\/code> \u0432 \u043f\u0430\u043f\u043a\u0435 <code>scr<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b <code>ToDoModel.ts<\/code> \u0441 \u043a\u043e\u0434\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default interface ToDo {   text: string;   completed: boolean; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b NoteModel.ts:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import ToDo from '.\/ToDoModel';  export default interface Note {   title: string;   todos: Array&lt;ToDo&gt;;   id: number; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u0438\u043f\u044b \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432 \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0431\u0443\u043a\u0432\u044b, \u043e\u043d\u0438 \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u0445\u043e\u0436\u0438, \u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0441\u043e\u0431\u0440\u0430\u0442\u044c\u0435\u0432 \u0438\u0437 js. \u0421\u0442\u0440\u043e\u043a\u0430 <code>todos: Array&lt;ToDo&gt;<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0438\u043f\u0430 ToDo, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0438\u0437 <code>ToDoModel.ts<\/code><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c. \u041e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 <code>src\/store\/index.ts<\/code>. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <a href=\"https:\/\/vuex.vuejs.org\/ru\/guide\/strict.html\" rel=\"nofollow\">\u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0440\u0435\u0436\u0438\u043c<\/a> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435, \u043a\u0430\u043a \u0438 \u0432\u043e Vue, \u0442\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0438\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u0432 \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043d\u0430\u0434 \u043d\u0438\u043c\u0438. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043d\u0435\u0440\u0430\u0437\u0431\u0435\u0440\u0438\u0445\u0435 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0441\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0430\u043c\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043b\u0435\u0442\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0438 \u043c\u043e\u0434\u0435\u043b\u0438. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>notes: [] as Note[],<\/code>, \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u0447(\u0441\u0440\u0430\u0437\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u0442\u0438\u043f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e typescript \u043a\u0430\u043a \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u043f\u0438\u0441\u0435\u0439), \u0438 <code>currentNote<\/code>, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0438. \u0421\u043e\u0437\u0434\u0430\u0435\u043c &quot;\u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e&quot; CRUD \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u043d\u0438\u0445, \u0438 \u0432\u043e\u0442 \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { createStore } from 'vuex' import Note from '@\/models\/NoteModel' import ToDo from &quot;@\/models\/ToDoModel&quot;  export default createStore({   state: {     notes: [] as Note[],     currentNote: {       title: &quot;&quot;,       todos: [] as ToDo[],       id: 0     } as Note   },   mutations: {     addNote(state) {       state.notes.push(JSON.parse(JSON.stringify(state.currentNote)))     },     deleteNote(state) {       state.notes = state.notes.filter(note =&gt; note.id != state.currentNote.id)     },     updateNote(state) {       let note = state.notes.find(note =&gt; note.id === state.currentNote.id)       let index = state.notes.indexOf(note as Note)       state.notes[index] = JSON.parse(JSON.stringify(state.currentNote))     },     setCurrentNote(state, payload: Note) {       state.currentNote = JSON.parse(JSON.stringify(payload))     },     updateTitle(state, payload: string) {       state.currentNote.title = payload     },     updateTodos(state, payload: ToDo[]) {       state.currentNote.todos = payload     },     addNewTodo(state) {       state.currentNote.todos.push({         text: &quot;&quot;,         completed: false       })     },     deleteTodo(state, index: number) {       state.currentNote.todos.splice(index, 1)     }   },   actions: {     saveNote({ commit }) {       const isOldNote: boolean = this.state.notes.some(el =&gt; el.id === this.state.currentNote.id)       if (isOldNote) {         commit('updateNote')       }       else {         commit('addNote');       }      },     fetchCurrentNote({ commit }, noteId: number) {       let note = this.state.notes.find(note =&gt; note.id === noteId)       commit('setCurrentNote', note)     },     updateCurrentNote({ commit }, note: Note) {       commit('setCurrentNote', note)     },    },   getters: {     getIdOfLastNote(state): number {       if (state.notes.length &gt; 0) {         const index = state.notes.length - 1          return state.notes[index].id       } else {         return 0       }     }   },   strict: true  }) <\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0438\u043f, \u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>createStore<\/code>. currentNote \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u044e\u0442 \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0439 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439, \u043f\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 notes.<\/p>\n<p>  <\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b <code>ToDoItem.vue<\/code> \u0432 \u043f\u0430\u043f\u043a\u0443 <code>components<\/code>. \u041e\u043d \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f\/\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438, \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u043b\u043e.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;template&gt;   &lt;li&gt;     &lt;div&gt;       &lt;input v-model=&quot;checked&quot; type=&quot;checkbox&quot; \/&gt;     &lt;\/div&gt;     &lt;div&gt;       &lt;span         :class=&quot;{ completed: todo.completed }&quot;         v-if=&quot;!editable&quot;         @click=&quot;editable = !editable&quot;       &gt;         {{ todo.text ? todo.text : &quot;Click to edit Todo&quot; }}       &lt;\/span&gt;       &lt;input         v-else         type=&quot;text&quot;         :value=&quot;todo.text&quot;         @input=&quot;onTextChange&quot;         v-on:keyup.enter=&quot;editable = !editable&quot;       \/&gt;     &lt;\/div&gt;      &lt;div&gt;       &lt;button @click=&quot;editable = !editable&quot;&gt;         {{ editable ? &quot;Save&quot; : &quot;Edit&quot; }}       &lt;\/button&gt;       &lt;button @click=&quot;$emit('remove-todo', todo)&quot;&gt;Delete&lt;\/button&gt;     &lt;\/div&gt;   &lt;\/li&gt; &lt;\/template&gt;  &lt;script lang=&quot;ts&quot;&gt;   import { defineComponent, PropType } from &quot;vue&quot;   import ToDo from &quot;@\/models\/ToDoModel&quot;    export default defineComponent({     name: &quot;TodoItem&quot;,     props: {       todo: {         type: Object as PropType&lt;ToDo&gt;,         required: true       }     },     data() {       return {         editable: false       }     },     methods: {       onTextChange(e: { target: { value: string } }) {         this.$emit(&quot;update-todo&quot;, e.target.value)       }     },     computed: {       checked: {         get(): boolean {           return this.todo.completed         },         set(value: boolean) {           this.$emit(&quot;checkbox-click&quot;, value)         }       }     }   }) &lt;\/script&gt;  &lt;style scoped&gt;   .completed {     text-decoration: line-through;   } &lt;\/style&gt; <\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e Vue \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 typescript \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>defineComponent<\/code>. \u0412\u0441\u0451 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 Options API \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u0430\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u043e. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0447\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430, \u043f\u0440\u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 <code>props<\/code> \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0434\u0443\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f. \u041d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 <code>PropType<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0438\u0437 vue, \u043e\u043d \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 typescript. \u0412 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435 \u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c <code>onTextChange(e: { target: { value: string } })<\/code>. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0442\u0438\u043f <code>any<\/code>, \u0442\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u043e \u044d\u0442\u043e \u0443\u0431\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u0441\u043c\u044b\u0441\u043b typescript.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 <code>this.$emit(&quot;update-todo&quot;, e.target.value)<\/code> \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0443\u0442 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0435\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>e.target.value<\/code>. \u0412\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">      &lt;TodoItem          &lt;?--... --&gt;         @update-todo=&quot;onUpdateTodo($event, index)&quot;       \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Note.vue. \u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u043e\u0432\u044b\u0439 Composition API \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e setup, \u0432\u0441\u0435 \u0442\u0430\u043a \u0436\u0435 \u043d\u0430 typescript. \u042d\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u0432\u0435\u0449\u0435\u0439 \u0438\u0437 vue, \u0432\u043e\u0442 \u0442\u0430\u043a:<br \/>  <code>import { defineComponent, computed, onMounted } from &quot;vue&quot;<\/code>. \u041d\u0430\u0448\u0438 $store \u0438 $router \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setup, \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0438\u043c \u2014 \u0438\u0445 \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041c\u043e\u0439 \u043e\u0431\u0437\u043e\u0440 Composition API \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 setup \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u043c\u043e\u0435\u0439 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 <a href=\"https:\/\/habr.com\/ru\/post\/521250\/\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a>. \u041d\u0430\u043f\u043e\u043c\u043d\u044e \u0442\u043e\u043b\u044c\u043a\u043e, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f setup \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f props, \u0445\u0443\u043a\u0438 created \u0438 beforeCreate \u0432 \u043d\u0435\u0439 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 beforeCreate\/created, \u0432\u0441\u0435 \u0447\u0442\u043e \u0432\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u0432 \u044d\u0442\u0438\u0445 <a href=\"https:\/\/v3.vuejs.org\/guide\/composition-api-lifecycle-hooks.html\" rel=\"nofollow\">\u0445\u0443\u043a\u0430\u0445<\/a>, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432 setup. \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Note.vue? \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0440\u044b\u0445, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 currentNote \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 note, \u043f\u043e\u0442\u043e\u043c \u043e\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0440\u043e\u0443\u0442\u0430, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u043c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 <code>:id<\/code>, \u043e\u043d \u043f\u0440\u043e\u0441\u0438\u0442 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u0443\u044e \u0437\u0430\u043c\u0435\u0442\u043a\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0451 \u0432 currentNote, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u0443\u0441\u0442\u0443\u044e \u0437\u0430\u043c\u0435\u0442\u043a\u0443. \u0410 \u0442\u0430\u043a \u0436\u0435 \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u043b.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;template&gt;   &lt;div&gt;     &lt;input :value=&quot;note.title&quot; @input=&quot;updateTitle&quot; \/&gt;     &lt;h2&gt;{{ note.title }}&lt;\/h2&gt;     &lt;hr \/&gt;     &lt;ul&gt;       &lt;TodoItem         v-for=&quot;(todo, index) in note.todos&quot;         :todo=&quot;todo&quot;         :key=&quot;index&quot;         @remove-todo=&quot;onRemoveTodo(index)&quot;         @update-todo=&quot;onUpdateTodo($event, index)&quot;         @checkbox-click=&quot;onCheckboxClick($event, index)&quot;       \/&gt;     &lt;\/ul&gt;     &lt;div class=&quot;new-todo&quot;&gt;       &lt;button @click=&quot;addNewTodo&quot;&gt;         Add Todo       &lt;\/button&gt;       &lt;span @click=&quot;addNewTodo&quot;&gt;Add New Todo&lt;\/span&gt;     &lt;\/div&gt;     &lt;hr \/&gt;     &lt;div&gt;       &lt;button @click=&quot;saveNote&quot;&gt;         Save       &lt;\/button&gt;       &lt;button @click=&quot;cancelEdit&quot;&gt;         Cancel       &lt;\/button&gt;       &lt;button @click=&quot;DeleteNote&quot;&gt;         Delete       &lt;\/button&gt;     &lt;\/div&gt;     &lt;hr \/&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script lang=&quot;ts&quot;&gt;   import TodoItem from &quot;@\/components\/ToDoItem.vue&quot;   import { defineComponent, computed, onMounted } from &quot;vue&quot;   import Note from &quot;@\/models\/NoteModel&quot;   import ToDo from &quot;@\/models\/ToDoModel&quot;   import store from &quot;@\/store&quot;   import router from &quot;@\/router&quot;    export default defineComponent({     name: &quot;Note&quot;,     components: {       TodoItem     },     setup() {       const note = computed(() =&gt; store.state.currentNote)        const saveNote = () =&gt; {         store.dispatch(&quot;saveNote&quot;)         router.push(&quot;\/&quot;)       }       const DeleteNote = () =&gt; {         store.commit(&quot;deleteNote&quot;, note)         router.push(&quot;\/&quot;)       }        const { currentRoute } = router       const fetchNote = () =&gt; {         if (currentRoute.value.params.id) {           const routeId: number = +currentRoute.value.params.id           store.dispatch(&quot;fetchCurrentNote&quot;, routeId)         } else {           const id = store.getters.getIdOfLastNote + 1           store.commit(&quot;setCurrentNote&quot;, {             title: &quot;&quot;,             todos: [] as ToDo[],             id: id           })         }       }       onMounted(fetchNote)        const updateTitle = (e: { target: { value: string } }) =&gt; {         store.commit(&quot;updateTitle&quot;, e.target.value)       }        const addNewTodo = () =&gt; {         store.commit(&quot;addNewTodo&quot;)       }        const onRemoveTodo = (index: number) =&gt; {         store.commit(&quot;deleteTodo&quot;, index)       }       const onUpdateTodo = (text: any, index: any) =&gt; {         let todos = JSON.parse(JSON.stringify(store.state.currentNote.todos))          todos[index].text = text         store.commit(&quot;updateTodos&quot;, todos)       }       const onCheckboxClick = (value: boolean, index: number) =&gt; {         let todos = JSON.parse(JSON.stringify(store.state.currentNote.todos))          todos[index].completed = value         store.commit(&quot;updateTodos&quot;, todos)       }        const cancelEdit = () =&gt; {         if (currentRoute.value.params.id) {           \/\/ undo changes         } else {         }         router.push(&quot;\/&quot;)       }       const clearNote = () =&gt; {         const id = store.getters.getIdOfLastNote + 1         store.commit(&quot;setCurrentNote&quot;, {           title: &quot;&quot;,           todos: [] as ToDo[],           id: id         } as Note)       }        return {         note,         saveNote,         addNewTodo,         cancelEdit,         onRemoveTodo,         onUpdateTodo,         DeleteNote,         clearNote,         updateTitle,         onCheckboxClick       }     },     beforeRouteLeave(to, from, next) {       this.clearNote()       next()     }   }) &lt;\/script&gt;  &lt;style&gt;   .new-todo {     display: flex;     justify-content: flex-start;     background-color: #e2e2e2;     height: 36px;     margin: 5px 0px;     padding-top: 4px;     padding-left: 10px;     padding-right: 15px;     border-radius: 5px;   } &lt;\/style&gt; <\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setup \u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0447\u0442\u0435\u043d\u0438\u044f. \u041a\u0440\u0430\u0441\u043e\u0442\u0430!<\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setup \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">     beforeRouteLeave(to, from, next) {       this.clearNote()       next()     }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0445\u0443\u043a \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044e\u0437\u0435\u0440 \u043f\u043e\u043a\u0438\u0434\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0423 \u043d\u0430\u0441 \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e &quot;\u043e\u0447\u0438\u0441\u0442\u043a\u0438&quot; \u0437\u0430\u043c\u0435\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432\u0441\u0435 \u044d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u0440\u043e\u0443\u0442\u0435\u0440\u0430. \u0412\u043e\u0442 \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 <code>\\router\\index.ts<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import List from '@\/views\/List.vue' import Note from '@\/views\/Note.vue'  const routes: Array&lt;RouteRecordRaw&gt; = [   {     path: '\/',     name: 'List',     component: List   },   {     path: '\/note',     name: 'Create',     component: Note   },   {     path: '\/note\/:id',     name: 'Edit',     component: Note   } ]  const router = createRouter({   history: createWebHistory(process.env.BASE_URL),   routes })  export default router<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0442\u0430\u043a \u0436\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b App.vue:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;template&gt;   &lt;div id=&quot;app&quot;&gt;     &lt;nav&gt;       &lt;router-link class=&quot;router-link&quot; to=&quot;\/&quot; exact&gt;List Of Notes&lt;\/router-link&gt;       &lt;router-link class=&quot;router-link&quot; to=&quot;\/note&quot; exact         &gt;Create Note&lt;\/router-link       &gt;     &lt;\/nav&gt;     &lt;hr \/&gt;     &lt;router-view \/&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt;   export default {     name: &quot;App&quot;   } &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b List.vue \u0432 \u043f\u0430\u043f\u043a\u0443 views:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;template&gt;   &lt;h2&gt;List of Notes&lt;\/h2&gt;   &lt;hr \/&gt;   &lt;div v-for=&quot;note in notes&quot; :key=&quot;note.id&quot; :to=&quot;`\/note\/${note.id}`&quot;&gt;     &lt;h2&gt;{{ note.title }}&lt;\/h2&gt;     &lt;h3&gt;{{ note.id }}&lt;\/h3&gt;     &lt;ul&gt;       &lt;li         :class=&quot;todo.completed ? 'completed' : ''&quot;         v-for=&quot;(todo, index) in note.todos&quot;         :key=&quot;index&quot;       &gt;         {{ todo.text }}       &lt;\/li&gt;     &lt;\/ul&gt;     &lt;button @click=&quot;$router.push(`\/note\/${note.id}`)&quot;&gt;Go to note&lt;\/button&gt;     &lt;hr \/&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt;   export default {     computed: {       notes() {         return this.$store.state.notes       }     }   } &lt;\/script&gt;  &lt;style&gt;   .completed {     text-decoration: line-through;   } &lt;\/style&gt; <\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0442\u0430\u043b\u0438\u0441\u044c, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/github.com\/harmyderoman\/tsvue-todo-app\" rel=\"nofollow\">\u043e\u0442\u0441\u044e\u0434\u0430<\/a>. <\/p>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 typescript \u043d\u0430 vue. \u042d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e <a href=\"https:\/\/v3.vuejs.org\/guide\/typescript-support.html\" rel=\"nofollow\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 ts \u043d\u0430 Vue 3<\/a> \u0438 <a href=\"https:\/\/www.typescriptlang.org\/docs\/\" rel=\"nofollow\">typescript<\/a>. <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u0430\u043b\u0435\u043a \u043e\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f. \u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0443\u0431\u043e\u0433\u0438\u0439(\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u0442\u0438\u043b\u0438) \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b: \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0435\u0439, \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430-\u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f, \u043a\u043d\u043e\u043f\u043a\u0438 redo\\undo \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438. \u0410 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440, \u043f\u043e\u0437\u043d\u0430\u0432\u0448\u0438\u0439 \u0434\u0437\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 npm-\u043f\u0430\u043a\u0435\u0442. \u042d\u0442\u0438\u043c \u043c\u044b \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<\/div>\n<p> \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\/524998\/\"> https:\/\/habr.com\/ru\/post\/524998\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tc\/h_\/-d\/tch_-dpmujwnjv8ldhjfs_hmmf0.png\" alt=\"vue3+ts\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c Typescript \u0440\u0430\u0441\u0442\u0435\u0442 \u0434\u0435\u043d\u044c \u043e\u0442\u043e \u0434\u043d\u044f. Javascript \u043d\u0435\u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a(\u0438\u043b\u0438 \u0441\u043b\u0430\u0431\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0442\u043e\u0447\u043d\u0435\u0435), \u0438 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0438 \u0441\u0442\u0440\u043e\u043a\u0443, \u0438 \u0447\u0438\u0441\u043b\u043e, \u0438 \u0434\u0430\u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u044f\u0437\u044b\u043a \u0433\u0438\u0431\u043a\u0438\u043c, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439, \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u0435\u0434\u0435\u0442 \u043a \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u043e\u0448\u0438\u0431\u043a\u0430\u043c. Typescript \u0441\u043e\u0437\u0434\u0430\u043d, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. Vue \u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043e\u0442 \u043c\u043e\u0434\u044b, \u0438 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0431\u044b\u043b\u0430 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044f\u0437\u044b\u043a\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 Typescript \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435, \u0447\u0435\u043c \u0431\u044b\u043b \u0440\u0430\u043d\u044c\u0448\u0435. \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u043e\u0432\u043e\u0434 \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0447\u0435\u043c\u0443-\u0442\u043e \u043d\u043e\u0432\u043e\u043c\u0443, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u0432 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u043a \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u044f\u043c \u043e\u043d \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0447\u0430\u0449\u0435 \u0438 \u0447\u0430\u0449\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b <a href=\"https:\/\/habr.com\/ru\/post\/520248\/\">\u0440\u0430\u043d\u0435\u0435<\/a>, \u043d\u0430 Vue 3 \u0438 Typescript \u0438 \u0432\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 Vue-Router \u0438 Vuex(\u043a\u0440\u0438\u0442\u0438\u043a\u0438, \u0432\u044b \u0431\u044b\u043b\u0438 \u0443\u0441\u043b\u044b\u0448\u0430\u043d\u044b).<\/p>\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-312711","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312711","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=312711"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312711\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=312711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=312711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=312711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}