Quiz about Unions, Intersections & Aliases - TypeScript Quiz

Table of Contents#

1. Unions in TypeScript
2. Intersections in TypeScript
3. Aliases in TypeScript
4. Quiz
5. Answers and Explanations
6. Common Practices and Best Practices
7. Conclusion
8. References

Unions in TypeScript#

What are Unions?#

In TypeScript, a union type allows you to specify that a variable can be one of several types. You use the pipe symbol | to separate each type.

Example Usage#

let value: string | number;
 
value = "hello"; // valid
value = 10;      // valid
// value = true; // invalid, because it's neither a string nor a number

Use Case#

Unions are useful when a function can accept different types of arguments. For example:

function printValue(value: string | number) {
    console.log(value);
}
 
printValue("world");
printValue(20);

Intersections in TypeScript#

What are Intersections?#

Intersection types combine multiple types into one. An intersection type requires a value to satisfy all the types in the intersection. You use the ampersand symbol & to define an intersection.

Example Usage#

interface Person {
    name: string;
}
 
interface Employee {
    employeeId: number;
}
 
type PersonEmployee = Person & Employee;
 
const personEmployee: PersonEmployee = {
    name: "John Doe",
    employeeId: 123
};

Use Case#

Intersections are useful when you want to create a type that has all the properties of multiple types. For example, if you have different mixins in your application, you can use intersections to combine them.

Aliases in TypeScript#

What are Aliases?#

Type aliases allow you to create a new name for an existing type. This can be useful for simplifying complex types and making your code more readable.

Example Usage#

type StringOrNumber = string | number;
 
let value: StringOrNumber;
 
value = "test";
value = 5;

Use Case#

Aliases are often used for complex types or when you want to reuse a type in multiple places. For example, if you have a specific shape of an object that is used in multiple functions, you can create an alias for it.

type User = {
    name: string;
    age: number;
    email: string;
};
 
function printUser(user: User) {
    console.log(user.name, user.age, user.email);
}

Quiz#

1. What is the correct way to define a union type for a variable that can be a string or a boolean? A. let value: string & boolean; B. let value: string | boolean; C. let value: [string, boolean];
2. Given the following interfaces:

   interface Shape {
       area(): number;
   }
    
   interface Colorful {
       color: string;
   }
    
   type ColorfulShape = Shape & Colorful;

   Which of the following objects can be assigned to a variable of type ColorfulShape? A.

   const circle: ColorfulShape = {
       color: "red",
       area: () => 3.14 * 5 * 5
   };

   B.

   const square: ColorfulShape = {
       area: () => 4 * 4
   };

   C.

   const rectangle: ColorfulShape = {
       color: "blue"
   };

3. What is the purpose of a type alias? A. To create a new instance of a class B. To create a new name for an existing type C. To define a union type

Answers and Explanations#

1. Answer: B

   • Option A (let value: string & boolean;) is incorrect because the & symbol is used for intersections, not unions.
   • Option B (let value: string | boolean;) is correct because the | symbol is used to define a union type.
   • Option C (let value: [string, boolean];) defines a tuple type, not a union type.

2. Answer: A

   • Option A is correct because the circle object has both the color property from the Colorful interface and the area method from the Shape interface.
   • Option B is incorrect because the square object only has the area method and is missing the color property.
   • Option C is incorrect because the rectangle object only has the color property and is missing the area method.

3. Answer: B

   • Option A is incorrect because a type alias is used for types, not for creating instances of classes.
   • Option B is correct because the purpose of a type alias is to create a new name for an existing type.
   • Option C is incorrect because while you can use a type alias to define a union type, that is not the primary purpose of a type alias.

Common Practices and Best Practices#

Unions#

• Type Narrowing: When working with union types, it's often necessary to perform type narrowing to access the specific properties or methods of each type. You can use type guards like typeof or instanceof for this purpose.

function printValue(value: string | number) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else {
        console.log(value.toFixed(2));
    }
}

Intersections#

• Avoid Over - Complexity: Intersection types can become very complex if you combine too many types. Try to keep them simple and only use intersections when necessary.

Aliases#

• Reuse and Readability: Use type aliases to reuse complex types and make your code more readable. Give your aliases meaningful names.

Conclusion#

Unions, intersections, and aliases are powerful features in TypeScript that allow you to work with complex types effectively. By understanding these concepts and practicing with the quiz provided, you can improve your TypeScript skills and write more robust code.

References#

• TypeScript Handbook
• MDN Web Docs - TypeScript