Using TypeScript — Tuples and Enums

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at how to define and use tuples and enums in our TypeScript code.

Tuples

Tuples are fixed lengths arrays, and each element can have a different type.

It’s a TypeScript-specific data structure that’s transformed into regular JavaScript arrays.

For instance, we can define one by writing:

let person: [string, number] = ["james", 100];

Tuples are defined using square brackets with the types of each element inside separated by commas.

We defined a tuple of 2 elements in the example above, where the first element must be a string and the 2nd must be a number.

Processing Tuples

TypeScript enforces the actions that we can take with arrays.

We can use them with standard JavaScript features since they’re just implemented with regular arrays.

For instance, we can write:

const strings: string[] = person.map(e => e.toString());

We called the map on it like a regular array.

Other array methods and operations are also available to tuples.

Using Tuple Types

Tuples have a distinct type that can be used just like any type.

This means that we can create arrays of tuples, union types with tuples, and type guards to restrict the values that can be in tuple types.

For instance, we can write:

let person: [string, number] = ["james", 100];
person.forEach(e => {
  if (typeof e === "number") {
    console.log(`number: ${e}`);
  } else if (typeof e === "string") {
    console.log(`string: ${e}`);
  }
});

We called the forEach method to loop through the entries and display the type with the data of each entry of the tuple.

The typeof operator lets us check the type and do something according to each type.

Enums

Enum let’s has created a collection that is used by name.

It makes code easier to read and ensures that fixed sets of values are used consistently.

We can define a TypeScript enum as follows:

enum Fruit {
  APPLE,
  ORANGE,
  GRAPE
}

We used the enum keyword and a bunch of constants inside to define an enum.

Then we can use it by writing:

const apple = Fruit.APPLE;

By default an enum value would be mapped to a number, so apple would be 0 since Fruit.APPLE is 0.

Likewise Fruit.ORANGE is 1 and Fruit.GRAPE is 2.

Since enum values are JavaScript number values by default, we can assign to a number variable:

const apple: number = Fruit.APPLE;

and the TypeScript compiler won’t give us any errors.

We can’t compare values from different enums.

For instance, we can’t write:

enum Fruit {
  APPLE,
  ORANGE,
  GRAPE
}

enum Gender {
  MALE,
  FEMALE
}

const apple: number = Fruit[Gender.FEMALE];

We can also assign our own values to an enum, so we can write:

enum Fruit {
  APPLE,
  ORANGE = 10,
  GRAPE
}

Then Fruit.ORANGE is 10 and Fruit.GRAPE is 11.

It’ll start incrementing from the set value if the constant is after the that has a value assigned to it.

String Enums

TypeScript enums have number values by default.

However, we can assign a string value to it.

For instance, we can write:

enum Fruit {
  APPLE = "apple",
  ORANGE = "orange",
  GRAPE = "grape"
}

Once we set an enum constant to a string, we’ve to set them all to a string.

Otherwise, we’ll get an error.

Limitations of Enums

There are some limitations with enums.

This is because the enum feature is implemented with the TypeScript compiler.

For instance, given that we have:

enum Fruit {
  APPLE,
  ORANGE,
  GRAPE
}

We can assign a value to it by writing:

const fruit: Fruit = 100;

The TypeScript compiler doesn’t prevent us from assigning invalid values to a variable with an enum type.

However, this isn’t a problem with string enums.

Also, the typeof operator can’t distinguish between enum and number values.

For instance, if we write:

enum Fruit {
  APPLE,
  ORANGE,
  GRAPE
}

let fruit: Fruit = Fruit.APPLE;
if (typeof fruit === "number") {
  console.log("fruit is a number");
}

Then we get 'fruit is a number' logged.

Conclusion

We can use tuples as fixed-length arrays and they can have different types of data in them.

Tuples can call array methods since they are JavaScript arrays with some restrictions.

Enums lets us define constant values under one umbrella.

They can have string or number values.