{"id":433,"date":"2023-02-07T05:00:00","date_gmt":"2023-02-07T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=433"},"modified":"2023-02-03T15:57:41","modified_gmt":"2023-02-03T23:57:41","slug":"union-types-in-typescript","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/union-types-in-typescript\/","title":{"rendered":"Union types in TypeScript"},"content":{"rendered":"\n

Yesterday, we talked about any<\/code>, unknown<\/code>, and the pros and cons of using such types.<\/p>\n\n\n\n

Today, let’s focus on union types<\/a>, an alternative to enums<\/a> that are more performant and flexible to describe custom types. Let’s assume we need to support different currencies in our application. Since currencies are mostly a code\/symbol, we could take the easy route and do the following:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

But this doesn’t help us much. For example, is any string<\/code> a valid currency? Definitely not. So a better option would be to create an enum<\/code> for it and describe all possible values in it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Now we have a proper type to describe what a Currency<\/code> is. But enums<\/code> aren’t that convenient because they can’t be used as-is in an Angular component template, requiring some workarounds<\/a>. Also, they get compiled into a monster structure of JavaScript<\/a> that increases the size of your code bundle for no valid reason since we don’t have type-checking at runtime in the browser.<\/p>\n\n\n\n

Enter union types<\/h2>\n\n\n\n

Union types solve all these problems. They’re lightweight and do not get compiled into anything at all, which means they’re always more performant than enums<\/code> (less code to download + less code to interpret = faster app in the browser). They guarantee type safety and can be made out of anything, including strings:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

A lot more can be done with union types, such as having more options than just one single type for a given variable:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Angular uses union types a lot<\/strong>. For instance, if you’ve ever used the canActivate router guard<\/a>, its signature supports up to 6 different return types, all defined with union types:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And we can have unions of union types when more granularity is needed with specific sub-types:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we talked about any, unknown, and the pros and cons of using such types. Today, let’s focus on union types, an alternative to enums that are more performant and flexible to describe custom types. Let’s assume we need to support different currencies in our application. Since currencies are mostly a code\/symbol, we could take […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,3],"tags":[],"class_list":["post-433","post","type-post","status-publish","format-standard","hentry","category-performance","category-typescript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/433","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=433"}],"version-history":[{"count":9,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"predecessor-version":[{"id":449,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/433\/revisions\/449"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}