# Typescript - Tips & Tricks - Union and Intersection

> Hi and welcome back! Today I talk about Union and Intersection. In some cases, we have to combine...

- **Author**: Luca Del Puppo (@puppo92) — AI Native Engineer at Nearform
- **Published**: Feb 22, 2021
- **Canonical URL**: https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-union-and-intersection/
- **Series**: TypeScript - Tips & Tricks (Part 4 of 21) — https://delpuppo.net/blog/series/ts-tips-and-tricks/
- **Series LLMs.txt**: https://delpuppo.net/blog/series/ts-tips-and-tricks/llms.txt
- **Category**: TypeScript
- **Tags**: typescript, webdev
- **Hashnode Mirror**: https://blog.delpuppo.net/typescript-tips-tricks-union-and-intersection
- **Dev.to Mirror**: https://dev.to/playfulprogramming/typescript-tips-tricks-union-and-intersection-1a9l
- **Blog Index LLMs.txt**: https://delpuppo.net/blog/llms.txt

## Series Context: TypeScript - Tips & Tricks

- Part 1: [Typescript - Tips & Tricks - typeof](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-typeof/)
- Part 2: [Typescript - Tips & Tricks - Literal Types](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-literal-types/)
- Part 3: [Typescript - Tips & Tricks - keyof](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-keyof/)
- Part 4: [Typescript - Tips & Tricks - Union and Intersection](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-union-and-intersection/) **(Current Article)**
- Part 5: [Typescript - Tips & Tricks - Overloaded Functions](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-overloaded-functions/)
- Part 6: [Typescript - Tips & Tricks - this parameter](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-this-parameter/)
- Part 7: [Typescript - Tips & Tricks - any vs. unknown](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-any-vs-unknown/)
- Part 8: [Typescript - Tips & Tricks - Optional modifier](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-optional-modifier/)
- Part 9: [Typescript - Tips & Tricks - Index Signature](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-index-signature/)
- Part 10: [Typescript - Tips & Tricks - readonly modifier](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-readonly-modifier/)
- Part 11: [Typescript - Tips & Tricks - Readonly Array](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-readonly-array/)
- Part 12: [Typescript - Tips & Tricks - Tuple](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-tuple/)
- Part 13: [Typescript - Tips & Tricks - Non-null assertion operator](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-non-null-assertion-operator/)
- Part 14: [Typescript - Tips & Tricks - Never type](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-never-type/)
- Part 15: [Typescript - Tips & Tricks - Assert Function](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-assert-function/)
- Part 16: [Typescript - Tips & Tricks - Type Guard](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-type-guard/)
- Part 17: [Typescript - Tips & Tricks - Conditional Type](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-conditional-type/)
- Part 18: [Typescript - Tips & Tricks - infer keyword](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-infer-keyword/)
- Part 19: [Typescript - Tips & Tricks - Mapped Types](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-mapped-types/)
- Part 20: [Typescript - Tips & Tricks - Advanced Types](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-advanced-types/)
- Part 21: [Typescript - Tips & Tricks - Rest Parameters & Rest Arguments](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-rest-parameters-rest-arguments/)

---

Hi and welcome back!
Today I talk about [Union and Intersection](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html).

In some cases, we have to combine different types to create new types, or sometimes we have parameters that could be of different types.
Typescript helps us with two powerful features: _Union_(|) and _Intersection_(&).

## Union
A union type describes a value that can be one of several types.
```ts
type Padding = number | string
let paddingNumber: Padding = 1
let paddingString: Padding = '----';
let paddingError: Padding = true // Type 'boolean' is not assignable to type 'Padding'.
```
In this case, the padding can be a number or a string, and the compiler detects if you set different types; this feature can be used also with custom types.
```ts
type Fish = {
  name(): string;
  swim(): true;
};
type Cat = {
  name(): string;
  meows(): true;
};
type Pet = Fish | Cat; // { name(): string; }
declare function createPet(): Pet;
let pet = createPet();
pet.name()
pet.swim() // Property 'swim' does not exist on type 'Pet'
pet.meows(); // Property 'meows' does not exist on type 'Pet'
```
In this example we can see how the union type creates the Pet type; the Pet type is composed by a single method "name". This method is the only one present in the two initial types: Fish and Cat.

## Intersection
An intersection type combines multiple types into one.
```ts
type Point2D = {
  x: number;
  y: number;
};
type Point3D = Point2D & {
  z: number;
};
let point2d: Point2D = { x: 0, y: 0 };
let point3d: Point3D = { x: 0, y: 0, z: 0 };
```
We can see that the Point3D type is the union of the Type Point2D and the type { z: number; }.

That's all for today!
See you soon guys!