Allows multiple possible types.

What is intersection?

Combines multiple types into one.

TypeScript Union & Intersection Types - Learn TYPESCRIPT | Revochamp

Name: TypeScript Union & Intersection Types
Availability: InStock
Author: Revochamp

What are Union Types?

Union types allow a variable to hold multiple possible types using the '|' operator.

Union Example

TypeScriptRead-only

let id: string | number;
id = 101;
id = 'ABC';

let id: string | number;
id = 101;
id = 'ABC';

What are Intersection Types?

Intersection types combine multiple types into one using the '&' operator, requiring all properties.

Intersection Example

TypeScriptRead-only

type A = { name: string };
type B = { age: number };

type Person = A & B;

type A = { name: string };
type B = { age: number };

type Person = A & B;

Union vs Intersection

Feature	Union (\|)	Intersection (&)
Meaning	Either type	Both types
Flexibility	High	Strict
Use Case	Multiple options	Combine structures

Practical Example

TypeScriptRead-only

function printId(id: string | number) {
  console.log(id);
}

function printId(id: string | number) {
  console.log(id);
}

Type Narrowing

TypeScriptRead-only

function printId(id: string | number) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  }
}

function printId(id: string | number) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  }
}

Best Practices

Use union for flexible inputs
Use intersection for combining types
Apply type narrowing for unions
Keep types readable

Common Mistakes

Confusing union with intersection
Not using type narrowing
Overcomplicating type combinations
Ignoring type conflicts in intersections

Conclusion

Union and intersection types provide flexibility and structure in TypeScript, enabling powerful type combinations.

Feature

Union (|)

Intersection (&)

Meaning

Either type

Both types

Flexibility

High

Strict

Use Case

Multiple options

Combine structures

TypeScript Union & Intersection Types

TypeScript Union & Intersection Types

What are Union Types?

Union Example

What are Intersection Types?

Intersection Example

Union vs Intersection

Practical Example

Type Narrowing

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

TypeScript Union & Intersection Types

TypeScript Union & Intersection Types

What are Union Types?

Union Example

What are Intersection Types?

Intersection Example

Union vs Intersection

Practical Example

Type Narrowing

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?