Introduction to TypeScript Data Types — Tuple, Enum, and Any
Tags: webdev, programming, javascript, typescript
Published: 2021-01-23 20:00:35

**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:

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

Then we get:

```typescript
["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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
enum Fruit { Orange, Apple, Grape };
```

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

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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.