Union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. A union type defines a type that can be one of several possible types. This allows for greater flexibility in code, as variables can accept a broader range of values without compromising type safety.<\/p>\n
In this article, we will look closer at union types in TypeScript and explore how they can be used in code.<\/p>\n
To define a union type in TypeScript, we use the pipe character (|) to separate each possible type. Take a look at the following piece of code:<\/p>\n
let DataFlair_myVar: string | number;\r\n<\/pre>\nHere, we have defined a variable called DataFlair_myVar that can hold a string or a number value. This means we can assign a value of either type to DataFlair_myVar without any issues.<\/p>\n
DataFlair_myVar = 'hello';\r\nconsole.log(DataFlair_myVar); \/\/ Output: \"hello\"\r\n\r\n\r\nDataFlair_myVar = 42;\r\nconsole.log(DataFlair_myVar); \/\/ Output: 42\r\n<\/pre>\nAs you can see, we first assign a string value to DataFlair_myVar, and then a number value. Both assignments are valid, as DataFlair_myVar can hold values of either type.<\/p>\n
Union Types with Interfaces<\/h3>\n
Union types can also be used in conjunction with interfaces. Take a look at the following piece of code:<\/p>\n
interface DataFlair_Dog {\r\n type: 'dog';\r\n breed: string;\r\n}\r\n\r\ninterface DataFlair_Cat {\r\n type: 'cat';\r\n color: string;\r\n}\r\n\r\ntype Pet = DataFlair_Dog | DataFlair_Cat;\r\n\r\nfunction printPet(pet: Pet) {\r\n switch (pet.type) {\r\n case 'dog':\r\n console.log(`This is a ${pet.breed} dog.`);\r\n break;\r\n case 'cat':\r\n console.log(`This is a ${pet.color} cat.`);\r\n break;\r\n }\r\n}\r\n\r\nconst myDog: DataFlair_Dog = { type: 'dog', breed: 'Labrador' };\r\nconst myCat: DataFlair_Cat = { type: 'cat', color: 'Black' };\r\n\r\nprintPet(myDog); \/\/ Output: This is a Labrador dog.\r\nprintPet(myCat); \/\/ Output: This is a Black cat.\r\n<\/pre>\nHere, we have defined two interfaces, DataFlair_Dog and DataFlair_Cat, which represent a dog and a cat, respectively. We have also defined a union-type Pet, which can hold a DataFlair_Dog or a DataFlair_Cat. Finally, we have determined a function printPet that takes a parameter of type Pet and prints information about the pet based on its type.<\/p>\n
In the main body of the code, we create two objects of type DataFlair_Dog and DataFlair_Cat and then pass them as arguments to the printPet function. The function uses a switch statement to determine the type of pet and print the appropriate information.<\/p>\n
TypeScript Union Types with Type Aliases<\/h3>\n
Union types can also be used in conjunction with type aliases. A type alias is a way of creating a new name for an existing type. Take a look at the following piece of code:<\/p>\n
type DataFlair_MyNumber = number;\r\ntype MyString = string;\r\ntype MyBoolean = boolean;\r\n\r\ntype MyType = DataFlair_MyNumber | MyString | MyBoolean;\r\n\r\nfunction printType(type: MyType) {\r\n console.log(`This is a ${typeof type}.`);\r\n}\r\n\r\nconst myNumber: DataFlair_MyNumber = 42;\r\nconst myString: MyString = 'hello';\r\nconst myBoolean: MyBoolean = true;\r\n\r\nprintType(myNumber); \/\/ Output: This is a number.\r\nprintType(myString); \/\/ Output: This is a string.\r\nprintType(myBoolean); \/\/ Output: This is a boolean.\r\n<\/pre>\nHere, we have defined three type aliases, `DataFlair_MyNumber,` `MyString,` and `MyBoolean,` which are simply aliases for the built-in types `number,` `string,` and `boolean.` We have then defined a union type, `MyType` that can hold values of these three types. Finally, we have defined a function `printType` that takes a parameter of type `MyType` and prints the type of the value passed to it.<\/p>\n
In the main body of the code, we create three variables of type `DataFlair_MyNumber,` `MyString,` and `MyBoolean,` and then pass them as arguments to the `printType` function. The function prints the type of each value based on its actual type.<\/p>\n
Using Union Types for Optional Parameters<\/h3>\n
Union types can also be helpful when defining optional function parameters. Consider the following code snippet:<\/p>\n
function DataFlair_printName(firstName: string, lastName?: string) {\r\n if (lastName) {\r\n console.log(`My name is ${firstName} ${lastName}.`);\r\n } else {\r\n console.log(`My name is ${firstName}.`);\r\n }\r\n}\r\n\r\nDataFlair_printName('John', 'Doe'); \/\/ Output: My name is John Doe.\r\nDataFlair_printName('Jane'); \/\/ Output: My name is Jane.\r\n<\/pre>\nHere, we have defined a function DataFlair_printName that takes two parameters, firstName, and lastName. The lastName parameter is optional, as the question mark (?) indicates. The function will print the first name if lastName is not provided.<\/p>\n
In the main body of the code, we call the DataFlair_printName function twice, once with both first and last names and once with only the first name. The function behaves correctly in both cases.<\/p>\n
Using Union Types for Overloaded Functions<\/h3>\n
Union types can also be used in conjunction with function overloading. Function overloading allows you to define multiple function signatures with the same name but different parameter types. For example, consider the following code snippet:<\/p>\n
function DataFlair_add(a: number, b: number): number;\r\nfunction DataFlair_add(a: string, b: string): string;\r\nfunction DataFlair_add(a: any, b: any): any {\r\n return a + b;\r\n}\r\n\r\nconsole.log(DataFlair_add(1, 2)); \/\/ Output: 3\r\nconsole.log(DataFlair_add('hello', 'world')); \/\/ Output: helloworld\r\n<\/pre>\nHere, we have defined an overloaded function called add. Two function signatures have been defined, one of which requires two number parameters and returns a number. The other of which requires two string parameters and outputs a string. We have also defined a third function signature that takes two parameters of any type and returns a value of the same type.<\/p>\n
In the main body of the code, we call the add function twice, once with two numbers and once with two strings. The function correctly returns the sum of the numbers and the concatenation of the strings.<\/p>\n
Padding in Union<\/h3>\n
In TypeScript, a padding union creates a union type that includes a set of related values, where each value has a fixed, known size.<\/p>\n
Padding unions are useful when working with binary data, where each piece of data has a fixed size in bytes. For example, suppose you have a binary data format that includes four-byte integers and two-byte floats. You can create a padding union that includes both types, ensuring that each value is properly aligned and padded to the correct size.<\/p>\n
To create a padding union in TypeScript, you can use the | operator to combine multiple types. For example:<\/p>\n
type FourByteInt = number;\r\ntype TwoByteFloat = number;\r\n\r\ntype DataFlair_PaddedUnion = FourByteInt | [TwoByteFloat, number];\r\n<\/pre>\nIn this example, DataFlair_PaddedUnion is a union type that includes FourByteInt and a tuple of TwoByteFloat and number, where the number provides padding to ensure the tuple is aligned properly.<\/p>\n
Padding unions can help ensure that binary data is properly formatted and interpreted. They can also make code more readable by explicitly specifying the size and alignment of each value.<\/p>\n
Discriminating Union<\/h3>\n
In TypeScript, a discriminated union is a union type that includes a common property, called a discriminant, used to determine which union variant is being used. This allows for more precise type checking and safer code.<\/p>\n
To create a discriminated union in TypeScript, you can use the type keyword to define a union type that includes a common property, then use that to discriminate between the different variants. For example:<\/p>\n
type DataFlair_Shape =\r\n | { kind: 'circle'; radius: number }\r\n | { kind: 'square'; size: number }\r\n | { kind: 'rectangle'; width: number; height: number };\r\n\r\n\r\nfunction calculateArea(shape: DataFlair_Shape) {\r\n switch (shape.kind) {\r\n case 'circle':\r\n return Math.PI * shape.radius ** 2;\r\n case 'square':\r\n return shape.size ** 2;\r\n case 'rectangle':\r\n return shape.width * shape.height;\r\n }\r\n}\r\n<\/pre>\nIn this example, the DataFlair_Shape type is a discriminated union with three variants: circle, square, and rectangle. Each variant has a different set of properties, but all include a kind of property used to discriminate between them.<\/p>\n
The calculateArea function takes a DataFlair_Shape parameter and uses a switch statement to calculate the area based on the union variant passed in. Because the kind property is used to discriminate between the different variants, TypeScript can ensure that the properties accessed in each case statement are valid for that variant.<\/p>\n
Discriminated unions are a powerful feature of TypeScript that can help make your code more type-safe and less error-prone.<\/p>\n
TypeScript Array as Union Type<\/h3>\n
In TypeScript, an array can be used as a union type to represent a value that can be one of several different types, with each type being an array element.<\/p>\n
To create an array as a union type in TypeScript, you can use the [] syntax to define an array type and then use the | operator to combine multiple types. For example:<\/p>\n
type DataFlair_NumberOrStringArray = (number | string)[];\r\n\r\nconst arr1: NumberOrStringArray = [1, 2, 3]; \/\/ valid\r\nconst arr2: NumberOrStringArray = ['hello', 'world']; \/\/ valid\r\nconst arr3: NumberOrStringArray = [1, 'hello', 2, 'world']; \/\/ valid\r\nconst arr4: NumberOrStringArray = [true]; \/\/ invalid, boolean not allowed in union type\r\n<\/pre>\nIn this example, NumberOrStringArray is an array type with number and string types as array elements. This allows an array to contain a combination of numbers and strings but not other types, such as boolean.<\/p>\n
Array as union types are useful in cases where you need to represent a collection of values that can be of different types. They provide a convenient way to ensure that the values in an array meet certain criteria and can help make your code more type-safe.<\/p>\n
Union replace enum<\/h3>\n
In TypeScript, a union type can be used as a replacement for an enum in certain situations. Enums are a way of defining a set of named constants in TypeScript. But they have limitations, such as the inability to represent open sets of values.<\/p>\n
To use a union type as a replacement for an enum, you can define a type that includes a set of related values using the | operator. For example:<\/p>\n
type DataFlair_Color = 'red' | 'green' | 'blue';\r\n\r\n\r\nfunction getColorCode(color: DataFlair_Color) {\r\n switch (color) {\r\n case 'red':\r\n return '#FF0000';\r\n case 'green':\r\n return '#00FF00';\r\n case 'blue':\r\n return '#0000FF';\r\n }\r\n}\r\n<\/pre>\nIn this example, DataFlair_Color is a union type that includes three string literals: “red,” “green,” and “blue.” This allows for a set of related values to be defined without the limitations of an enum.<\/p>\n
The getColorCode function takes a DataFlair_Color parameter and returns a corresponding color code. Because DataFlair_Color is a union type, TypeScript can ensure that only valid colors are passed to the function.<\/p>\n
Using a union type as a replacement for an enum can provide more flexibility in certain situations. Like when you need to represent an open set of values or to avoid the runtime overhead of enums. However, enums still have their place in TypeScript, particularly when you need to represent a closed set of values or when you need to perform operations on enum members at runtime.<\/p>\n
Conclusion<\/h3>\n
In conclusion, union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. This allows for greater flexibility in code, as variables can accept a wider range of values without compromising type safety. Union types can be used with interfaces, type aliases, optional function parameters, and function overloading. It makes them a versatile and essential tool in any TypeScript developer’s toolkit.<\/p>\n","protected":false},"excerpt":{"rendered":"
Union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. A union type defines a type that can be one of several possible types. This...<\/p>\n","protected":false},"author":581,"featured_media":113021,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27319],"tags":[27352],"class_list":["post-112894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-tutorials","tag-typescript-union-types"],"yoast_head":"\n
TypeScript Union Types - DataFlair<\/title>\n<meta name=\"description\" content=\"union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. Learn more about it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/typescript-union-types\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript Union Types - DataFlair\" \/>\n<meta property=\"og:description\" content=\"union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. Learn more about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/typescript-union-types\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-11T03:30:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-11T05:35:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-union.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TypeScript Union Types - DataFlair","description":"union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. Learn more about it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/","og_locale":"en_US","og_type":"article","og_title":"TypeScript Union Types - DataFlair","og_description":"union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. Learn more about it.","og_url":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-04-11T03:30:45+00:00","article_modified_time":"2023-04-11T05:35:23+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-union.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"TypeScript Union Types","datePublished":"2023-04-11T03:30:45+00:00","dateModified":"2023-04-11T05:35:23+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/"},"wordCount":1454,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-union.webp","keywords":["TypeScript Union Types"],"articleSection":["TypeScript Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/typescript-union-types\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/","url":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/","name":"TypeScript Union Types - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-union.webp","datePublished":"2023-04-11T03:30:45+00:00","dateModified":"2023-04-11T05:35:23+00:00","description":"union types are a powerful type feature in TypeScript that allows you to define a variable with multiple types. Learn more about it.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/typescript-union-types\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-union.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-union.webp","width":1200,"height":628,"caption":"typescript union"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/typescript-union-types\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"TypeScript Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/typescript-tutorials\/"},{"@type":"ListItem","position":3,"name":"TypeScript Union Types"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112894"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112894\/revisions"}],"predecessor-version":[{"id":113023,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112894\/revisions\/113023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113021"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}