This Unknown TypeScript Feature is a Must Have for Large Projects

One of the most underrated features in Typescript is branded types and they solve a very particular problem. In this code, you can see that I have a user here and I'm calling this get order function. I'm passing in the latest sale ID. But you notice I'm actually getting an error inside my code for TypeScript. And if I look into this get order function, that's because this get order function specifically takes an invoice ID. This is a branded type. So instead of just taking a generic string, it takes a specific type of string, which is an invoice ID. And since I'm passing a sale ID instead of an invoice ID, I get an error. Now, if I pass along the correct invoice ID, you can see that error goes away. So, this gives me type safety where I can say, hey, this isn't just a generic string. This is a specific type of string. And that's the whole idea behind branded types. Now, creating these branded types is incredibly easy and they can solve many more problems than just this. To create a branded type, all we need to do is to write some rather simple TypeScript code. I know it looks a little bit complex right here, but I'm going to explain exactly what's going on. We're going to create our very own type. We're going to call it branded type. And this branded type is equal to whatever your normal type is. So in our case, a string in for these ids. And then we just want to combine that together with an object. And this object is going to essentially use a unique symbol. So we can create a const called whatever we want, which is a unique symbol. That's what this brand up here is. We add that in just like that as a property name. And then we want to give it a value. And this value can be literally anything. I generally just make it a string, which is whatever this type is. So in our case, invoice ID. And now I'm essentially saying that I have a type that is a string and also it contains this unique symbol with a value of use invoice ID. Now this invoice ID technically never actually exists on our JavaScript code. It's purely there for TypeScript code. And I just created this nice little helper brand to make this a little bit more compact. So now we can easily create brands for strings, numbers, and so on. And these are great for different IDs or durations, but it's also really great for validation. For example, I have this email type right here, which is a validated email. I know it's a valid email. So I can use a function like is email with this val is email that is essentially a type predicate in Typescript telling it that this if it returns true is the type of email. So I just have a regular expression here. And if I call is email with an email or something that is valid. You can see the type for this thing right here is an email. So when I pass it to get user, it works properly. While if I call get user and I just pass it a generic string, you notice I get an error cuz it needs to be of that email type. So this is a great way for you to add extra validation. So now you know, hey, this is a validated email and not just some generic email. And it's also really easy to add branded types to things like Drizzle because they have these really nice type properties you can add on to do all your different branded IDs and other branded types directly on Drizzle or any other type of validation library or database library like this. Now, if you want to dive deeper into this, I have a full video talking about branded types I will link down at the bottom of the