{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/ciekawostki-typescript-4-typowanie-strukturalne","result":{"data":{"markdownRemark":{"html":"<p>Jesteśmy przyzwyczajeni, że JS jest liberalny, dzięki stosowanemu przezeń <em>typowaniu kaczemu</em> (\"jeśli coś chodzi jak kaczka i kwacze jak kaczka...\"). Innymi słowy - póki nazwy pól się zgadzają, możemy obiekty stosować wymiennie:</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-javascript line-numbers\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> dog <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">\"Rex\"</span><span class=\"token punctuation\">,</span>\n  age<span class=\"token operator\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n  breed<span class=\"token operator\">:</span> <span class=\"token string\">\"German shepherd\"</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> cat <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token string\">\"Filemon\"</span><span class=\"token punctuation\">,</span>\n  age<span class=\"token operator\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">sayLoveTo</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> name <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">I love you, </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>name<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">!</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">sayLoveTo</span><span class=\"token punctuation\">(</span>dog<span class=\"token punctuation\">)</span>\n<span class=\"token function\">sayLoveTo</span><span class=\"token punctuation\">(</span>cat<span class=\"token punctuation\">)</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>Gdy jednak do tego wszystkiego dodamy typy, sprawy się komplikują - wydawać by się mogło, że obikety <code class=\"language-text\">dog</code> i <code class=\"language-text\">cat</code> (jeśli są różnych typów, np. <code class=\"language-text\">Dog</code> i <code class=\"language-text\">Cat</code>) muszą mieć wspólny typ bazowy, żeby można było je przekazać do metody. Okazuje się jednak - że nie:</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-typescript line-numbers\"><code class=\"language-typescript\"><span class=\"token keyword\">interface</span> <span class=\"token class-name\">Dog</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span>\n  age<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span>\n  breed<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">interface</span> <span class=\"token class-name\">Cat</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span>\n  age<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">interface</span> <span class=\"token class-name\">SomeoneToLove</span> <span class=\"token punctuation\">{</span>\n  name<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> sayLoveTo <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span>someone<span class=\"token operator\">:</span> SomeoneToLove<span class=\"token punctuation\">)</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">I love you, </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>someone<span class=\"token punctuation\">.</span>name<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">!</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<p>Jak widać, nie ma żadnej relacji pomiędzy typami <code class=\"language-text\">Dog</code>, <code class=\"language-text\">Cat</code> i <code class=\"language-text\">SomeoneToLove</code> - i właśnie nie musi być! Wszak TS idzie to w ślad (i musi iść) JS, de facto stosując <em>typowanie kacze</em>.</p>\n<p>Taka cecha języka może być niespodzianką i czasami prowadzić do pułapek, ale z drugiej strony w wielu miejscach ułatawia pisanie, na przykład w testach jednostkowych.</p>\n<p>Ten wpis jest częścią serii o TypeScripcie, inspirowaną lekturą <a href=\"https://helion.pl/ksiazki/typescript-skuteczne-programowanie-dan-vanderkam,e_1lgp.htm\">książki D. Vanderkama pt. \"TypeScript. Skuteczne programowanie\"</a>.</p>","excerpt":"Jesteśmy przyzwyczajeni, że JS jest liberalny, dzięki stosowanemu przezeń typowaniu kaczemu (\"jeśli coś chodzi jak kaczka i kwacze jak kaczka...\"). Innymi słowy…","frontmatter":{"date":"28 October, 2020","path":"/blog/ciekawostki-typescript-4-typowanie-strukturalne","title":"Ciekawostki Typescript #4 - typowanie strukturalne"},"fields":{"readingTime":{"text":"2 min read"}}}},"pageContext":{}},"staticQueryHashes":["3649515864","63159454"]}