Скачать или смотреть Creating an Array with Multiple Types in TypeScript

Discover how to effectively create an array in TypeScript that can hold multiple types by using union types for better flexibility and functionality.
---
This video is based on the question https://stackoverflow.com/q/67192601/ asked by the user 'Andy88' ( https://stackoverflow.com/u/10691389/ ) and on the answer https://stackoverflow.com/a/67192675/ provided by the user 'samuellawrentz' ( https://stackoverflow.com/u/8252164/ ) 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: Typescript - How to to create array with multiple types

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 the Problem: Creating an Array with Multiple Types in TypeScript

Working with TypeScript provides you with a powerful type system that allows you to define variable types and interfaces. However, sometimes you might want to mix different types in a single array. For instance, you may have different interfaces that share some common properties, and you want to create an array that can accommodate instances of these varying interfaces.

Let's explore a common scenario:

The Scenario

Imagine you have the following interfaces defined:

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

You want to create an array called listOfPeople which can contain both Person and Employee objects. Unfortunately, simply declaring your array as Person[] | Employee[] won’t work correctly and might lead to a TypeScript error, as TypeScript cannot infer the mixed types from that definition.

The Solution: Using Union Types

The best approach to accomplish your goal is to use a union type. This allows the array to accept elements of either Person or Employee.

Step-by-Step Solution

Declare the Union Type:
Instead of denying the array either type, you can specify that the listOfPeople array will contain elements that could be of either Person type or Employee type.

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

Initialize the Array:
Create the array with a mix of Person and Employee objects:

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

Why This Works

Flexibility: By using the (Person | Employee)[] syntax, you are telling TypeScript that this array can hold items of either type, thus giving you the flexibility needed to work with a mixed collection of objects.

Runtime Safety: TypeScript can now provide you with useful type checking during development, ensuring that you maintain type safety across your application.

Summary

Creating an array that combines multiple types in TypeScript is straightforward, thanks to union types. To summarize:

Define interfaces that extend from common properties.

Use the union type syntax to define your mixed array.

Initialize the array with appropriate objects.

With these steps, you can easily manage an array containing different object types in TypeScript while taking full advantage of the language's strong typing features.

Now you can effectively create mixed-type arrays! Happy coding!