Скачать или смотреть Accessing Properties of Union Type Objects in TypeScript without Type Casting

Learn how to use discriminated unions in TypeScript to access properties without type casting, making your code cleaner and more efficient.
---
This video is based on the question https://stackoverflow.com/q/63720382/ asked by the user 'Martin Sergio' ( https://stackoverflow.com/u/7610701/ ) and on the answer https://stackoverflow.com/a/63721361/ provided by the user 'Marek Szkudelski' ( https://stackoverflow.com/u/13093310/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to access property of union type object without type casting in Typescript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Union Types in TypeScript

In TypeScript, union types allow a variable to hold values of different types. This is incredibly useful when working with APIs or other data structures where you may not know what type of data you'll be dealing with ahead of time. The challenge arises when you attempt to access properties specific to one of those types without clear indicators of which type you're dealing with. This is where the concept of discriminated unions comes in handy.

The Problem

Imagine you have the following type definitions:

[[See Video to Reveal this Text or Code Snippet]]

You also have a function designed to process these actions:

[[See Video to Reveal this Text or Code Snippet]]

In this scenario, you're trying to access the todo property of the action object without using type casting with as. Unfortunately, TypeScript will throw an error because it doesn't know whether action is of type a or type b.

The Solution: Using Discriminated Unions

To solve this issue, you need to enhance your union types by declaring a type property in each of the interfaces. This type property will serve as a discriminant, allowing TypeScript to understand which type you're currently working with in your function.

Step-by-Step Breakdown

Define the type property: Modify the type definitions to include a type property with string literals indicating the type of the object.

[[See Video to Reveal this Text or Code Snippet]]

Implement the function with a switch statement: Update your function to switch based on the type property.

[[See Video to Reveal this Text or Code Snippet]]

Benefits:

Cleaner Code: No need for type casting (i.e., (action as a).todo).

Type Safety: TypeScript can efficiently infer the types based on the switch case.

Maintainability: Easier for other developers to understand the flow of data through your application.

Conclusion

By implementing discriminated unions in your TypeScript code, you can access properties of union type objects without needing to cast types manually. This not only leads to cleaner and more efficient code, but also enhances the overall maintainability of your application.

Embrace the power of TypeScript's type system and make your applications robust and error-free!