TypeScript Bits

Enum Flags ... are ... awesome!

TypeScript Bits are small, easily digestible pieces of information to encourage TypeScript/JavaScript best practices. From beginner, to intermediate, to ninja, these bits are for you 😄

Estimated reading time : 5 minutes

An often overlooked feature of most if not all languages is the concept of Enum Flags. In a nutshell, Enum Flags are an efficient way of storing and representing a collection of boolean values with one value 😎. This applies to all SQL languages, C#, Java, Python, Rust, GoLang, the list goes on, and illustrated here in TypeScript.

_{Is it possible to store if a field is required, readonly, and visible in the number 13?}

Before

interface IFieldRule {
    isReadOnly : boolean;
    isMasked : boolean;
    isRequired : boolean;
    isVisible : boolean;
    isHeaderVisible : boolean;
}


// fieldA should be readOnly, required, and visible
let fieldARules : IFieldRule = {
    isReadOnly : true,
    isMasked : false,
    isRequired : true,
    isVisible : true,
    isHeaderVisible : false
}

console.log(`the representation in JSON would be : ${JSON.stringify(fieldARules,null,2)}`)
/*
// the JSON representation will be ->
{
  "isReadOnly": true,
  "isMasked": false,
  "isRequired": true,
  "isVisible": true,
  "isHeaderVisible": false
}
*/
console.log(`Is fieldA readOnly? ${fieldARules.isReadOnly}`); //true
console.log(`Is fieldA required? ${fieldARules.isRequired}`); //true
console.log(`Is fieldA visible? ${fieldARules.isVisible}`); //true

After

enum FieldRule {
    None = 0,
    isReadOnly = 1, // 1 << 0
    isMasked = 2, // 1 << 1
    isRequired = 4, // 1 << 2
    isVisible = 8, // 1 << 3
    isHeaderVisible = 16, // 1 << 4 try it! console.log(1<<4) prints 16
}

// fieldA should be readOnly, required, and visible
let fieldARulesEnum : FieldRule = FieldRule.isReadOnly | FieldRule.isRequired | FieldRule.isVisible; 

console.log(`the representation in JSON would be : ${fieldARulesEnum}`);
/*
// the JSON representation will be ->
   13 
*/
console.log(`Is fieldA readOnly? ${(fieldARulesEnum & FieldRule.isReadOnly) == FieldRule.isReadOnly}`); //true
console.log(`Is fieldA required? ${(fieldARulesEnum & FieldRule.isRequired) == FieldRule.isRequired}`); //true
console.log(`Is fieldA visible? ${(fieldARulesEnum & FieldRule.isVisible) == FieldRule.isVisible}`); //true

Bonus!

SELECT
    COUNT(1)
FROM FieldRules
WHERE
    fieldName = 'fieldA' AND
    fieldRule & 4 <> 0 -- testing for isRequired

Notes

IMPORTANT only use when necessary, and where applicable. While this functionality is cool, determine if a use case warrants it.
Bitwise operations can be used to determine exclusivity, inclusivity, remove items, add items, if all flags are set, etc.
This is often used in Databases with ONE smallint or int column representing the selected Days of the Week for a particular entity
INSIGHT : Using the example above imagine a form with 40 fields and the JSON that would be needed if using booleans (200 fields), vs 40 with Enum Flags.
- This is a very useful exercise when thinking about data transmission, slow connections, compression/decompression
It is not uncommon to see a set of enum flags defined across an enterprise or vertical, and used between different languages and datastores supporting bitwise operations (which is most if not all)

Visit the TypeScript Deep Dive for Enums for more in-depth information!