{"id":767,"date":"2023-04-11T05:00:00","date_gmt":"2023-04-11T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=767"},"modified":"2023-04-07T14:31:08","modified_gmt":"2023-04-07T21:31:08","slug":"partial-utility-type-in-typescript","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/partial-utility-type-in-typescript\/","title":{"rendered":"Partial utility type in Typescript"},"content":{"rendered":"\n<p>Typescript is excellent for type safety as it prevents us from making mistakes when declaring new objects. That said, an object is sometimes created by aggregating data from different sources (different API calls, for instance).<\/p>\n\n\n\n<p>For instance, say we have the following interfaces:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"385\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-12.png\" alt=\"\" class=\"wp-image-768\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-12.png 712w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-12-300x162.png 300w\" sizes=\"auto, (max-width: 712px) 100vw, 712px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>We have to create an instance of the <code>Question<\/code> object, but let&#8217;s imagine that creating that object requires several steps. In the first step, I retrieve data for the question itself, and in the second step, I have to retrieve the list of options.<\/p>\n\n\n\n<p>At first, my Question object would look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"181\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-13.png\" alt=\"\" class=\"wp-image-769\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-13.png 706w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-13-300x77.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>But this code won&#8217;t compile, as <code>myQuestion<\/code> is missing the <code>options<\/code> property. We could assign an empty array to options, or we could make it optional in the interface using this syntax: <code>options?: Option[];<\/code><\/p>\n\n\n\n<p>All of that seems like cheating, though. Instead, we can use the <code><a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/utility-types.html#partialtype\" target=\"_blank\" rel=\"noopener\" title=\"\">Partial<\/a><\/code> utility type to indicate that our object is in a temporary state:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"182\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-14.png\" alt=\"\" class=\"wp-image-770\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-14.png 725w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-14-300x75.png 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The compiler is happy with the above code; we don&#8217;t have to change our interfaces.<\/p>\n\n\n\n<p><code>myQuestion<\/code> is now an object that implements a subset of the <code>Question<\/code> interface, with all properties marked as optional.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Typescript has several more <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/utility-types.html\" target=\"_blank\" rel=\"noopener\" title=\"\">utility types<\/a> like <code>Partial<\/code>. I&#8217;ll cover more of those in the upcoming newsletters.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typescript is excellent for type safety as it prevents us from making mistakes when declaring new objects. That said, an object is sometimes created by aggregating data from different sources (different API calls, for instance). For instance, say we have the following interfaces: We have to create an instance of the Question object, but let&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-767","post","type-post","status-publish","format-standard","hentry","category-typescript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":772,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/767\/revisions\/772"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}