{"id":1186,"date":"2023-07-14T05:00:00","date_gmt":"2023-07-14T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1186"},"modified":"2023-07-13T10:55:20","modified_gmt":"2023-07-13T17:55:20","slug":"using-precise-types-with-typescript","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/using-precise-types-with-typescript\/","title":{"rendered":"Using precise types with Typescript"},"content":{"rendered":"\n<p>Typescript has a lot to offer when it comes down to&#8230; types. Which makes perfect sense, right? Let&#8217;s take a few examples based on the following interface:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"258\" height=\"174\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-7.png\" alt=\"\" class=\"wp-image-1190\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The following variable is meant to store the <code>id<\/code> of a <code>User<\/code> in our application. The type of that <code>id<\/code> is a number, so this declaration is accurate:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"52\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-5.png\" alt=\"\" class=\"wp-image-1188\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>But could be a lot more precise if we used the following syntax instead:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"252\" height=\"45\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-8.png\" alt=\"\" class=\"wp-image-1191\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Now we are expressing that <code>id<\/code> is of the same type as <code>User<\/code> <code>id<\/code> (which is still a number), and we make it explicit that we&#8217;re using this variable to store a <code>User id<\/code>, not just any number. We are using an <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/indexed-access-types.html#handbook-content\" target=\"_blank\" rel=\"noopener\" title=\"\">indexed type<\/a>.<\/p>\n\n\n\n<p>We can use a similar approach for our language. Instead of being any <code>string<\/code>, we can narrow that type using <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/union-types-in-typescript\/\" target=\"_blank\" rel=\"noopener\" title=\"\">union types<\/a>: <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"228\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-9.png\" alt=\"\" class=\"wp-image-1192\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-9.png 545w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-9-300x126.png 300w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>A user&#8217;s language can only be one of the four listed values. This makes our code safer (a typo would be caught by our compiler and IDE instantly) and doesn&#8217;t impact performance (union types do not get compiled into anything).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typescript has a lot to offer when it comes down to&#8230; types. Which makes perfect sense, right? Let&#8217;s take a few examples based on the following interface: The following variable is meant to store the id of a User in our application. The type of that id is a number, so this declaration is accurate: [&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-1186","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\/1186","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=1186"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1186\/revisions"}],"predecessor-version":[{"id":1194,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1186\/revisions\/1194"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}