DEV Community

loading...

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

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・6 min read

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

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

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

["hello", 1, true]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

Then we get:

hello  
1  
true
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get the following:

hello  
1  
true  
Person {name: "Jane"}
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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

enum Fruit { Orange, Apple, Grape };  
console.log(Fruit.Orange);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

1  
2  
3
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

1  
1  
2
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

-1  
0  
1
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

Then we get:

Orange  
Apple  
Grape
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

1  
string
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Then we get:

[1, true, "abc"]
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide