John Au-Yeung

Posted on Jan 17, 2020

Introduction to TypeScript Data Types — Tuple, Enum, and Any

#typescript #javascript #tutorial #beginners

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

JavaScript, like any other programming language, has its own data structures and types. JavaScript has a few data types that we have to know about in order to build programs with it. Different pieces of data can be put together to build more complex data structures.

JavaScript is a loosely typed, or dynamically typed, language. This means that a variable that’s declared with one type can be converted to another type without explicitly converting the data to another type.

Variables can also contain any type at any time, depending on what’s assigned. With dynamically typed languages, it’s hard to determine the type that a variable has without logging it and we might assign data that we don’t want in the variable.

TypeScript rectifies these issues by letting us set fixed types for variables so that we’re sure of the types. In this article, we’ll look at the TypeScript data types that are exclusive to TypeScript. In this article, we will look at the tuple, enum, and any data types.

Tuple

A tuple is a comma-separated list of objects. We can have as many comma-separated items as we want. However, in reality, we probably shouldn’t have more than 10 comma-separated items in a type. In TypeScript, we can declare a variable with the type by using brackets, with the type names separated by commas inside. This means that each entry in a tuple will have the type that’s set when we declared the tuple variable. For example, we can write:

let x: [string, number, boolean] = ['hello', 1, true];  
console.log(x);

Then we get:

["hello", 1, true]

A tuple is just an array that has fixed types of each entry. If we put the type that’s different than what we have specified in the position when we declared it, then we get an error. For example, if we have:

let x: [string, number, boolean] = [2, 1, true];  
console.log(x);

Then we get the “Type ‘number’ is not assignable to type ‘string’.” error, and the program won’t run. We can access an entry in tuple like we do with arrays since they’re just arrays with fixed types for each entry. For example, we can write the following code:

let x: [string, number, boolean] = ['hello', 1, true];  
console.log(x);  
console.log(x[0]);  
console.log(x[1]);  
console.log(x[2]);

Then we get:

hello  
1  
true

Likewise, the destructuring assignment operator also works as expected like any other arrays. For example, we can write:

const x: [string, number, boolean] = ['hello', 1, true];  
const [str, num, bool] = x;  
console.log(x);  
console.log(str);  
console.log(num);  
console.log(bool);

Then we get the same output as before. We can also put non-primitive objects inside tuple objects. For example, we can have an instance of a class that we created like in the following code:

class Person{  
  name: string;  
  constructor(name: string){  
    this.name = name;  
  }  
}  
const x: [string, number, boolean, Person] = ['hello', 1, true, new Person('Jane')];  
const [str, num, bool, person] = x;  
console.log(x);  
console.log(str);  
console.log(num);  
console.log(bool);  
console.log(person);

Then we get the following:

hello  
1  
true  
Person {name: "Jane"}

from the console.log output.

Enum

TypeScript has an enum type that’s not available in JavaScript. An enum type is a data type that has a set named values called elements, members, enumeral or enumerator of the type. They’re identifiers that act like constants in the language. In TypeScript, an enum has a corresponding index associated with it. The members start with the index 0 by default, but it can be changed to start at any index we like and the subsequent members will have indexes that increment from that starting number instead. For example, we can write the following code to define a simple enum in TypeScript:

enum Fruit { Orange, Apple, Grape };

Then we can access a member of an enum like with the following code:

enum Fruit { Orange, Apple, Grape };  
console.log(Fruit.Orange);

Then console.log from the code above should get us 0 since we didn’t specify a starting index for the enum. We can specify the starting index of an enum with something like in the following code:

enum Fruit { Orange = 1, Apple, Grape };  
console.log(Fruit.Orange);  
console.log(Fruit.Apple);  
console.log(Fruit.Grape);

Then we get the following logged from each console.log statement in order:

1  
2  
3

We can specify the same index for each member, but it wouldn’t be very useful:

enum Fruit { Orange = 1, Apple = 1, Grape };  
console.log(Fruit.Orange);  
console.log(Fruit.Apple);  
console.log(Fruit.Grape);

Then we get:

1  
1  
2

from the console.log. As we can see, we specify the index pretty much however we want to change it. We can even have negative indexes:

enum Fruit { Orange = -1, Apple, Grape };  
console.log(Fruit.Orange);  
console.log(Fruit.Apple);  
console.log(Fruit.Grape);

Then we get:

-1  
0  
1

from the console.log . To get an enum member by its index, we can just use the bracket notation like we access array entries by its index. For example, we can write the following code:

enum Fruit { Orange, Apple, Grape };  
console.log(Fruit[0]);  
console.log(Fruit[1]);  
console.log(Fruit[2]);

Then we get:

Orange  
Apple  
Grape

Any

In TypeScript, the any type means that we can assign anything to the variable that’s been declared with the type any. It’s no different from assigning anything as we do with variables in JavaScript. This lets us adopt JavaScript slowly to TypeScript, and also allows us to use dynamic objects like dictionaries. It also lets us use variables that we don’t know the type of like members from third-party library modules. We can assign anything to a variable with the any type and not get any errors. For example, we can declare and use a variable with the any type like in the code below:

let x: any = 1;  
console.log(x);  
x = 'string';  
console.log(x);

If we run the code above, then we get the following console.log value:

1  
string

The any type if also handy for declaring other data types like arrays. If we declare an array with the any type, then we can put data of any type as entries in our declared array. We can declare an array with any type like in the following code:

let anyList: any[] = [1, true, "abc"];  
console.log(anyList);

Then we get:

[1, true, "abc"]

from the console.log. TypeScript has an Object type which corresponds to the Object object in JavaScript. Therefore, it can’t be used like the any type. The Object type has its own methods like toString, hasOwnProperty, etc., and it’s nothing like the any type, which actually means that the variable can be assigned anything. For example, if we write the following:

let x: Object = 2;  
x.toFixed();

We would get the error “Property ‘toFixed’ does not exist on type ‘Object’.”. However, we can write the following code:

let x: Object = 2;  
console.log(x.hasOwnProperty('foo'));

As we can see, the Object type has a hasOwnProperty property method, which is what the Object object in JavaScript has.

A tuple is a comma-separated list of objects. We can have as many comma-separated items as we want. It’s just a JavaScript array with fixed types for each entry. TypeScript has an enum type that’s not available in JavaScript. An enum type is a data type that has a set named values called elements, members, enumeral or enumerator of the type.

They’re identifiers that act like constants in the language. Each enum member has an index, which can be set arbitrarily. We can also get the member name from its index with the bracket notation like how we get an array entry by its index.

The any type lets us assign anything to the variable that’s been declared with the type any . It’s no different from assigning anything as we do with variables in JavaScript.