{"id":7416,"date":"2019-09-22T09:08:24","date_gmt":"2019-09-22T09:08:24","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7416"},"modified":"2019-09-22T09:08:43","modified_gmt":"2019-09-22T09:08:43","slug":"be-aware-that-an-async-when-not-required-adds-extra-code","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/be-aware-that-an-async-when-not-required-adds-extra-code\/","title":{"rendered":"Be aware that an async (in TypeScript) when not required adds extra code"},"content":{"rendered":"<p>Whilst aysnc\/await is not formally part of the ES spec (I believe it is available when targetting es2017) we need to be aware of situations where declaring async adds code which is not required. <\/p>\n<p>Specifically I came across some code where a class&#8217;s method was marked as async but without an implementation, i.e.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nclass Derived {\r\n    public async doSomething(): Promise&lt;void&gt; {\r\n    }\r\n}\r\n<\/pre>\n<p>This compiled\/transpiled with the tsconfig.json settings of the project (a React project) and will produce the following code<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n&quot;use strict&quot;;\r\nvar __awaiter = (this &amp;&amp; this.__awaiter) || function (thisArg, _arguments, P, generator) {\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator&#x5B;&quot;throw&quot;](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || &#x5B;])).next());\r\n    });\r\n};\r\nclass Derived {\r\n    doSomething() {\r\n        return __awaiter(this, void 0, void 0, function* () {\r\n        });\r\n    }\r\n}\r\n<\/pre>\n<p>Obviously is not the intention here, i.e. to include the __awaiter code etc. What the code should have looked like is<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nclass Derived {\r\n    public dataBind(): Promise&lt;void&gt; {\r\n        return Promise.resolve();\r\n    }\r\n}\r\n<\/pre>\n<p>which then produces JavaScript matching exactly this code, i.e. <\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n&quot;use strict&quot;;\r\nclass Derived {\r\n    dataBind() {\r\n        return Promise.resolve();\r\n    }\r\n}\r\n<\/pre>\n<p>I know this might seem a little picky, but from what I could see, for every file that includes an empty async method we get an __awaiter created, considering we use minifiers etc. to try to reduce our code size, this obviously makes a difference when code size is important.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whilst aysnc\/await is not formally part of the ES spec (I believe it is available when targetting es2017) we need to be aware of situations where declaring async adds code which is not required. Specifically I came across some code where a class&#8217;s method was marked as async but without an implementation, i.e. class Derived [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-7416","post","type-post","status-publish","format-standard","hentry","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7416"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7416\/revisions"}],"predecessor-version":[{"id":7455,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7416\/revisions\/7455"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}