Skip to content
Related Articles

Related Articles

Improve Article

How to define an array of different generic types in TypeScript ?

  • Last Updated : 26 Jul, 2021

In typescript, an array is a data type that can store multiple values of different data types sequentially. Similar to JavaScript, Typescript supports array declaration and there are multiple ways to do it.

Declaring and Initializing Arrays:

  • We can either use var or let for declaring an array.
  • The difference is var is used if we want the variable to be reflected/implemented throughout the program and let for a specific block.
  • Following are the syntax

Method 1: Declaring and initializing on a separate line: Here we declare an array and initialize on separate lines, as the example given below. Often it is used for producing cleaner and readable code. We use the square type bracket if we already know the type of array and arrow brackets if we are using generic ( does not restrict to one data type).

var Arrayname[:datatype]; // Declaration

Arrayname = [val1,val2,val3,valn..] // Initialization



Array Declaration and Initialization starting from 0

Here we declare digits array with a generic type, number, so the first digit, 23 indicates the type of array(number). If we do not declare the type of array, it’s classified as any.

Javascript




var fruits: Array<string>;
fruits = ['Kiwi', 'Plums', 'Peaches','Apples','Lime','Cherries'];
 
var Digits: Array<number>;
Digits = [23, 34, 100, 124,];

Method 2: Declaration and initializing on the same line: An alternative of declaring and initializing the array in the same line.

Example:

 
 

Javascript




/* First method of usual array with
square brackets and second method of
generic arrays for examples fruits
and Digits */
 
var fruits: string[] = ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var fruits: Array < String >= ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var Digits: number[] = [23, 34, 100, 124];
var Digits: Array < number >= [23, 34, 100, 124]

Note that the difference between the first and second methods is purely for cleaner code.

Declaring MultiType Array: The types are separated by “|” for each type and each corresponds to the previous element. In the below example, the capitals of the country are paired up (Thailand for Bangkok, New Delhi for India) and in the second example, we don’t have a string for the number 5, which means it’s independent and occupies the space just like other elements.



Javascript




/* In the first example we're associating
string with string and second example
vivek has 2 values 3 and 5, as we can have
multiple values */
var Capital: (string | string)[] = ['USA',
    'Washington D.C.', 'United Kingdom',
    'London', 'India', 'New Delhi',
    'Thailand', 'Bangkok'
];
// or
var Employees: Array < string | number >
    = ['Atul', 1, 'Vivek', 3, 5, 'Sania', 8];

Accessing Array Elements:

Method 1: Index Access(Direct Access): Direct access is possible when we know the index and size of the array. In the above example, we know “Dark” occupies 1 index hence we Chocolates[1], it returns White. However it’s tedious if the array length is too long, thereby we use the second method(looping).

Javascript




var Chocolates: string[] = ['White',
    'Dark', 'SemiSweet', 'BitterSweet'];
 
Chocolates[0]; // Returns White
Chocolates[1]; // Returns Dark
Chocolates[2]; // Returns SemiSweet
Chocolates[3]; // Returns BitterSweet
Chcoloates[4]; // Returns undefined

Method 2: Using loop: The large size of an array might be use looping instead of direct access to reduce the lines of code and for cleaner code. In the below example, we use for loop for parsing through the cities array and print it accordingly.

Alternatively, if we do not know the size of the array we use “in” the array to print the same.

Javascript




// Using loop for the given array
let Cities: string[] = ['Pune', 'Mumbai', 'Nagpur'];
 
 
for (var i = 0; i < Cities.length; i++) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}
 
for (var i in Cities) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :