Understanding Array and Tuples

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.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW