If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
00:00
One of the best ways of using TypeScript Enums effectively is to look at how the TypeScript team uses them, and one way that they do that is by using enums as flags. This is actually something that is inspired by game programming, which is an area of computing where every bit of performance matters. They actually show up in the compiler code quite commonly. As an example, here is an anum which contains flags which are used to configure how the TypeScript compiler formats your code. Now of course, the first time you see them, they might not make intuitive sense, so let's dissect how they work and how to use them effectively.
00:33
With a simple example, we create an ANA called animal flags, which will store the flags that we want on a particular animal. As an example, the animal might not have any flags, in which case we would use the non-property or it might have claws or it can fly or it might be endangered, and we can even combine them as an example, creating an in a member called flying endangered, which will be true for an animal that can fly and is endangered. Now, there are a few BITWISE JavaScript operators that we are using over here.
01:05
The first one is the Bitwise left shift operator. Basically we are taking the value one and then shifting it by zero spaces or one space or two space, and this shift is going to actually happen in the binary representation of one. Now of course, none is going to be the boundary value zero, but has clause is going to be the binary value one, and then can fly is going to be the binary value one zero because one has been shifted one space to the left and then is danger is going to be the binary 1 0 0 because one has been shifted two spaces to the left.
01:39
The other bitwise operator that we are using is the Bitwise, or which is going to take two values and combine them bit by bit. So if you combine can fly and is endangered, which is what we are doing for flying endangered, we get the binary 1, 1 0, and this is the fundamental method in which we create in arms that we intend to utilize as binary flags. Now that we know how to create flags, I want to take a second and point out how we intend to use them. And the feature that is enabled by flags is to use a set of bullions all grouped into a single property.
02:13
This is because each core member of the flag occupies a different bit within a single number. Let's take a look at how we can read. If a particular flag has been set on an individual animal from the Flags member, we can easily check if a particular flag has been set by using the Bitwise and operator. This condition will only be true if animal flags has the bit for house clause set to one, and we can use the same pattern to check for any of the flags as well, for example, can fly and is endangered. Now if you want to check if none of the flags have been set,
02:46
then we can simply compare the value to zero, which we conveniently stored in the member. None. To recap, we use the Bitwise and operator to read if a particular flag has been set and compare to none. If you want to verify that none of the Flags have been set with the reading out of the way, let's take a look at how we can set the individual flags. Of course, we can use an individual in a menu. For example, we can set the flags to none, and right now if you print the animal, of course we get the message no flags, but we can also set the individual flags without overriding what is there by using the bitwise
03:18
or assignment Here, what will happen is that animal of flags will have the Health Clause BITWISE member set to true, and because we are using or any other bit that might be zero or one will remain unchanged, we can also unset individual bits by being a bit fancy, we use the bitwise and assignment, but before we do that, we create a value such that all of the individual bits have been inverted. Using the Bitwise knot, we get a value such that all the bits will become one except for the bits that was already one within has clause.
03:50
So when we bitwise and with the resulting value, all of the bits within the existing flags will pass through except for the bit that existed for HA clause because that bit is going to be ended with the value zero and therefore it will get set to zero. Now that you understand what are flags and how to use them, the question you should have is why not just use separate bullions? And the reason is performance. To be clear, Ines flags is not something that you need for a standard web application, but when you are building something like the type ship compiler, which is used by millions of people across billions of lines of code,
04:24
the performance difference does become significant. Let's do a quick demonstration. Let's do a side by side comparison by creating an animal, using the flags in them, and then alternatively, creating an animal that just uses separate Boolean values. As we've seen, we can set individual flags using the members, so if you want an animal that has claws and is endangered, we simply set the flags member to has claws bitwise odd with the endangered member. If you want to create a similar animal using bullions, we have to set the individual properties, which is has close to true as well as is endangered set to true.
04:58
Now, there are a number of phase in which you could demonstrate the performance difference between the two, but a simple one that demonstrates it quite easily is serialization. We simply compare the amount of space it takes to store the alternative representations. As you can see, the Jason representation of the Flags version is only going to be 11 characters, whereas for the Boolean version, it's going to be 37 characters. And if you are transferring these data structures over a network, of course over time it's going to add up. I want to wrap up by saying that this doesn't mean that you should replace all your boos with flags,
05:32
but if you are in a high performance computing scenario, this is a neat built-in tool to have in your toolbox.