TypeScript Defining a Union Type
In this article, we are going to learn about Defining a Union Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, a union type allows a variable to have one of several possible types. You can define a union type by using the | (OR) operator to specify multiple types as options.
Syntax:
type UnionType = Type1 | Type2 | Type3 | ...;
Where-
- UnionType is the name you choose for your custom union type.
- Type1, Type2, Type3, …: these are the individual types that you want to include in the union. You can specify any number of types, and the variable of UnionType can have values of any of these types. This can be string, number, etc
Example 1: In this example, We define a union type called Result that can hold values of either number or string types. We declare a variable value of type Result and assign it different values, including a number and a string.TypeScript will allow assignments of values that are either numbers or strings, but it will raise an error when you try to assign a boolean value, as it’s not part of the union type.
Javascript
// Step 1: Identify the Types type Result = number | string; // Step 2: Define the Union Type // Step 3: Use the Union Type let value: Result; // Valid, as 42 is a number value = 42; // Valid, as "Hello" is a string value = "Hello! w3wiki" ; // value = true; // Error, as boolean is not part of the union type // Output depends on the assigned value console.log(value); // Step 4: Compile and Verify |
Output:
Example 2: This example shows ‘narrowing’ in union type. we have used typeof checks as type guards to narrow down the possible types within the union. Depending on the type, we perform different operations and log messages. We call the narrowUnion function with values of different types, such as a string, a number, a boolean, and null.
Javascript
// Define a union type type MyUnion = string | number | boolean; // Function to narrow the union type function narrowUnion(value: MyUnion): void { if ( typeof value === "string" ) { console.log( "Value is a string:" , value.toUpperCase()); } else if ( typeof value === "number" ) { console.log( "Value is a number:" , value * 2); } else if ( typeof value === "boolean" ) { console.log( "Value is a boolean:" , !value); } else { console.log( "Value is of an unknown type:" , value); } } // Example usages narrowUnion( "w3wiki" ); narrowUnion(99); narrowUnion( true ); // It will show error // Argument of type 'null' is not // assignable to parameter of type 'MyUnion'. narrowUnion( null ); |
Output:
Contact Us