Understanding Array and Tuples

03 Aug 2018

06 Aug 2018

Intermediate

2.11K Views

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

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

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 give 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 datatype of each element in array.

tuple.ts

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

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

tuple.js

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

Type Annotation

Type Annotations means 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 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 give 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 give 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 give 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 give 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.