Exercise - enums
Let's explore the different data types TypeScript makes available, and the effect they have on our code.
The enum type
A helpful addition to the standard set of datatypes from JavaScript is the enumeration type, or enum
.
Enumerations offer an easy way to work with sets of related constants. An enum
is a symbolic name for a set of values. Enumerations are treated as data types, and you can use them to create sets of constants for use with variables and properties.
Whenever a procedure accepts a limited set of variables, consider using an enumeration. Enumerations make for clearer and more readable code, particularly when meaningful names are used.
Using enumerations:
- Helps reduce errors caused by transposing or mistyping numbers.
- Makes it easy to change values in the future.
- Makes code easier to read, which means it's less likely that errors will creep into it.
- Ensures forward compatibility. With enumerations, your code is less likely to fail if someone changes the values corresponding to the member names in the future.
Creating an enum
Enums allow you to specify a list of available options. They're especially useful when you have a set of values that a particular variable type may take. Let's imagine you have field in an external database called ContractStatus, which contains the numbers 1, 2, or 3, that represent the following contact statuses: Permanent, Temp, and Apprentice. We'll create an enum with these values, and explore the TypeScript support.
Open the Playground and remove any existing code
Enter the following code to create an
enum
that represents our scenario:TypeScriptenum ContractStatus { Permanent, Temp, Apprentice }
Now, declare a variable for a new employee named
employeeStatus
of the typeContractStatus
and assign"Temp"
. Display the result to the console.TypeScriptlet employeeStatus: ContractStatus = ContractStatus.Temp; console.log(employeeStatus);
Select Run. Note the value displayed in the Log window. What value is returned?
By default,
enum
values begin with a value of 0, soPermanent
is 0,Temp
is 1, andApprentice
is 2. If you want the values to start with a different value, in this case 1, specify that in theenum
declaration. Make the following edits to have theenum
start the values at 1.TypeScriptenum ContractStatus { Permanent = 1, Temp, Apprentice }
Rerun the code by selecting Run. Notice the value displayed is now 2.
To display the name associated with the enum value, we can use the provided indexer. Add the following to the bottom of your code:
TypeScriptconsole.log(ContractStatus[employeeStatus]);
Run the code. Notice the value Temp is displayed, which is the name associated with the enum value 2.