TypeScript Tuples and Enums: Enhance your Typing Experience

TypeScript, a statically typed superset of JavaScript, offers a bunch of convenient features to make your coding experience smoother and more enjoyable. In this article, we will focus on two simple yet powerful concepts: Tuples and Enums. We will dive deep into their syntax, usage, and how they operate behind the scenes, followed by an engaging exercise. Let’s get started!

Table of Contents

• Tuples: A Quick Introduction
• More about Tuples
• Enums: A Quick Introduction
• More on Enums
• Enums behind the Scenes
• Putting it all Together
• Exercise: A Challenge for You
• Learn more about TypeScript

Tuples: A Quick Introduction

A Tuple is a special type of array whose elements can have different data types. TypeScript allows you to specify a tuple’s data types and the order of elements, which makes it an elegant way of working with smaller fixed-size and fixed-order arrays.

Here’s a simple example:

let tupleExample: [string, number];
tupleExample = ["hello", 42];
Code language: JavaScript (javascript)

In the code above, we declare a variable tupleExample with a tuple type of [string, number]. This tuple must contain exactly two elements, where the first one is of type string and the second one is of type number.

More about Tuples

Tuples can be as long or as short as you want, but their length and type order must be strictly followed. TypeScript will throw a compile-time error if you try to add or modify elements outside the specified format.

tupleExample = [42, "hello"]; // Error: Type 'number' is not assignable to type 'string'.
tupleExample[2] = "world"; // Error: Tuple type '[string, number]' of length '2' has no element at index '2'.
Code language: JavaScript (javascript)

Accessing elements of a tuple is similar to accessing elements of an array, and you will benefit from TypeScript’s autocompletion features as well.

let x: string = tupleExample[0]; // x becomes "hello"
Code language: JavaScript (javascript)

Enums: A Quick Introduction

Enumerations, or Enums, are a way to define meaningful names for a set of values. Enums can help you write more readable and less error-prone code by replacing magic values with descriptive names.

Here’s a simple example:

enum Directions {
  North,
  East,
  South,
  West,
}

const myDirection = Directions.North;
Code language: JavaScript (javascript)

In the code snippet above, we define an enum named Directions that contains four directions. By default, enum values are assigned an integer number, starting from 0.

More on Enums

Enums can also have custom values and not just integers. You can set the value of any element in the enum, or leave it unassigned.

enum FileAccess {
  None,
  Read = 1 << 1,
  Write = 1 << 2,
  ReadWrite = Read | Write,
}

In this example, we create an enum with a bitwise representation of file access permissions. Having custom values allows you to assign meaningful numbers or strings and combine enum values easily.

Enums behind the Scenes

It is essential to understand how Enums work behind the scenes. Enums are translated to JavaScript objects at runtime, which makes their usage as simple as that of a regular object.

Take this example enum:

enum Colors {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE",
}
Code language: JavaScript (javascript)

In JavaScript, the generated object would look like this:

var Colors = {
  Red: "RED",
  Green: "GREEN",
  Blue: "BLUE",
};
Code language: JavaScript (javascript)

Thus, accessing an enum value is the same as accessing an object property.

Putting it all Together

TypeScript Tuples and Enums provide an elegant typing experience and are invaluable when expressing ideas explicitly and precisely in your code. You will save time and effort by using these features in combination with other TypeScript elements, like Functions. To learn more about TypeScript, refer to this TypeScript Overview.

Exercise: A Challenge for You

Now that you’ve learned about Tuples and Enums, put your knowledge to the test! Create a tuple representing a person’s name, age, and profession, and an enum defining different professions. Use TypeScript to define the types and manipulate the values. Don’t forget to leave your comments or questions below! Good luck, and remember, practice makes perfect!

// Define the Professions enum
enum Professions {
  Developer,
  Designer,
  Manager,
  Marketer,
}

// Define a tuple representing a person's name, age, and profession
let person: [string, number, Professions];

// Assign values to the person tuple
person = ["Alice", 28, Professions.Developer];

// Access and manipulate the tuple elements
console.log(`${person[0]} is a ${person[1]} year old ${Professions[person[2]]}.`);
// Example output: Alice is a 28 year old Developer.
Code language: JavaScript (javascript)

Learn more about TypeScript

If you want to learn more about TypeScript make sure to check out our TypeScript category.