Mastering Complex Types in TypeScript

Ready to dive deep into the mighty ocean of TypeScript’s complex types? Strap on your gear because we’re about to descend into a world filled with code and creativity!

(Trying to write this in a fun & entertaining way…don’t judge!)

Remember to keep breathing while we explore this new world and we dive on the count of 1…2…3!(SPLASH!!!)

Union Types: The Shapeshifters

Picture Union types as magical shapeshifters. One minute they’re a number, and the next, they’re a string. Woah! They’re TypeScript’s way of saying, “Hey, I can be one of these types, okay?”

let multiType: number | string; // Our shapeshifter!
multiType = 20; // Look, I can be a number!
multiType = 'twenty'; // And a string too! Cool, isn't it?

With union types, your code isn’t locked into one form. It can flow freely like water, taking on the shape that suits the situation best!

Intersection Types: The Fusion Dancers

Imagine two dance teams, each brilliant in their style, fusing together to create an even more spectacular performance. That’s precisely what intersection types do in TypeScript!

type FirstType = {
    prop1: number;
}; // First dance team!

type SecondType = {
    prop2: string;
}; // Second dance team!

type CombinedType = FirstType & SecondType; // The fusion dance begins!

let combinedVar: CombinedType = { 
    prop1: 1,
    prop2: 'two'
};

Intersection types allow your code to become an all-star team, bringing together the strengths of different types!

Type Aliases: The Secret Agents

Type aliases are the secret agents of TypeScript. They get a code name for their mission and maintain the code’s secrets behind that alias. No one needs to know what’s behind that name, except you, of course!

type ComplexType = {
    id: number;
    name: string;
    address: {
        street: string;
        city: string;
    };
};

let user: ComplexType; 

With type aliases, your code maintains a sense of mystery while keeping things clean and organized.

Tuple Types: The Perfect Duos

Tuples in TypeScript are like the dynamic duos of superhero comics — Batman and Robin, Superman and Lois, or even Tom and Jerry! They’re inseparable pairs (or trios, quartets, and so on) that work together, each knowing their specific role!

let coordinates: [number, number]; // Super duo: Latitude and Longitude!
coordinates = [10, 20]; // Fighting geographic confusion, one coordinate at a time!

Tuples bring order and structure to your code, keeping elements in their rightful place!

Generics: The Master of Disguise

Ever wish you could be anyone you wanted? That’s what generics in TypeScript do! They can adapt and mold themselves to fit any situation, just like masters of disguise!

function identity<T>(arg: T): T { // The master of disguise preparing for a role!
    return arg;
}

let output1 = identity<string>("myString"); // Disguised as a string!
let output2 = identity<number>(100); // Now as a number! What's next?

Generics let your functions and classes blend into any situation, making your code as adaptable as a chameleon!

In this coding adventure, we’ve seen how TypeScript’s complex types add power, flexibility, and a sense of fun to JavaScript development. They’re like our team of superheroes, each with unique abilities, ready to tackle any code challenge that comes our way! So, get out there and start creating with TypeScript — the world (wide web) is your playground!

If you like my work click on the 👏, follow me for more content & buy me a coffee if you are feeling super generous.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.