Beginner

Intermediate

Advanced

Understanding Array and Tuples

Shailendra Chauhan

Print 5 min read

01 Sep 2022

Intermediate

13.7K Views

The Array type is used to store the same type of multiple values in a single variable and further the array elements you can access using the index number.

In other words, the array in TypeScript is a type of data structure where we can store the elements of a similar data type as a collection. In an array, we can store only a fixed set of elements which means that the array collection should have a similar type of data to be stored which can reside in a contiguous memory location.

The array in a TypeScript is index-based data storage which means each value is defined against the index where the first element is stored at index 0, the second element as 1st index, and so on.

An Array type can be defined using square brackets '[ ]' followed by elemType or generic array type 'Array' as given below:

Type of Arrays in TypeScript

In TypeScript, there are two types of arrays that can be used which are given below.

Single dimensional array
Multi dimensional array

Let's see the basic example to show how to use single and multi-dimensional arrays.

var singledim:number[] = [8,2,8,9,6,99,258] ; // single dimentional
var multidim:number[][] = [ [1,2,3] , [8,9,10] ] ; // multi dimentional

array.ts

let numberList: number[] = [1, 2, 3];
//OR
let numList: Array = [1, 2, 3];

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

array.js

var numberList = [1, 2, 3];
var numList = [1, 2, 3];

Tuple

The Tuple type represents a JavaScript array where you can define the data type of each element in the array. a tuple is a special type of array that stores multiple fields belonging to the different data types into the same collection. It is similar to the structures in the c programming language.

A tuple is a data type that can be used like any other variable and unlike an array, a tuple may have the collection of different data types. It represents the heterogeneous collection of the values and can also be provided as a parameter while doing a function call.

tuple.ts

let tuple: [string, number];
tuple = ["Gurukulsight", 1];

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

tuple.js

var tuple;
tuple = ["Gurukulsight", 1];

Type Annotation

Type Annotations mean defining the type of a variable explicitly. The type used to specify an annotation can be a primitive type, an object type, or any complex structure to represent data.

The type of a variable is defined by using colon (:) followed by the type.

Syntax

  :  = ; 
  : ;

type_annotation.ts

let num: number = 2; //type of num is number
let str: string = "Gurukulsight"; //type of str is string
let numberList: number[] = [1, 2, 3]; //type of numberList is number array

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

type_annotation.js

var num = 2;
var str = "Gurukulsight";
var numberList = [1, 2, 3];

Type Inference

Type inference is a mechanism to determine the type of data at compile time in the absence of explicit type annotations. TypeScript will infer the type from the initial value.

type_inference.ts

let myString = 'Hello Gurukulsight'; // string
let myBool = true; // boolean
let myNumber = 1.23; // number
let myArray = ['Hello', 'Gurukulsight']; // string[]

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

type_inference.js

var myString = 'Hello Gurukulsight'; // string
var myBool = true; // boolean
var myNumber = 1.23; // number
var myArray = ['Hello', 'Gurukulsight']; // string[]

Type Assertion

A type assertion is just like a type casting, but it doesn’t perform special type checking or restructuring of data just like other languages like C# and Java. This process entirely works on compile time. Hence it has no impact on runtime.

Type assertions can be done using two ways

1. Angle-bracket syntax

anglebracket.ts

let anyValue: any = "Welcome to www.gurukulsight.com!";
let strLength: number = (anyValue).length;

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

anglebracket.js

var anyValue = "Welcome to www.gurukulsight.com!";
var strLength = anyValue.length;

2. As syntax

anglebracket.ts

let anyValue: any = "Welcome to www.gurukulsight.com!";
let strLength: number = (anyValue).length;

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

anglebracket.js

var anyValue = "Welcome to www.gurukulsight.com!";
var strLength = anyValue.length;

What do you think?

I hope you will enjoy the Object and Miscellaneous Data Type in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.