Declare array in TypeScript
In this post, you will learn how to declare an array using the TypeScript.
An array is a collection of key/value pairs. We can store more than one item in a single variable, i.e., an array. So, an array is used when there is requirement to add more items in a single variable. Arrays are static. We can not change an array after initializing it. An array declaration assigns consecutive memory blocks. Each memory block shows an array element.
TypeScript Arrays
TypeScript provides different ways to declare an array.
Syntax using square bracketsvar array_name[:data type] = [val1,val2…valn]
This method is similar to the JavaScript declaration of arrays.
Examplelet vegs: string[] = ['Potato', 'Tomato', 'Onion'];
Syntax using a generic array type
var array_name[:data type] = [val1,val2…valn]
Example
let vegs: Array<string> = ['Garlic', 'Chilli', 'Ginger'];
let rolls: Array = [23, 13, 52, 114, 63];
TypeScript Array with Multiple types
In TypeScript, an array can contain elements of different data types. We can use a union type to create an array with multiple types.
Example of Multi Type Arraylet items: (string | number)[] = ['Table', 1, 'Chair', 4, 4, 'Bench'];
// or
let items: Array = ['Table', 1, 'Chair', 4, 4, 'Bench'];
TypeScript Array Methods
Method | Description |
concat() | Merge two or more arrays and return the combined result. |
copyWithin() | Copies array elements to another position in the array. |
fill() | Used to fill the array with a given static value from the provided start index to the end index. |
pop() | Removes the last element from an array and returns that element. |
push() | Appends the given element(s) in the last of the array and returns the length of the new array. |
sort() | Sorts all the elements of the array. |
indexOf() | Returns the index position of the first match of a value in an array. |
join() | Joins all elements of the array into a string. |
shift() | Removes and returns the first element of the array. |
splice() | Adds or removes elements from the array. |
unshift() | Adds one or more elements to the beginning of an array and returns the new length of the array. |
includes() | Checks whether the array contains a certain element. |
slice() | Extracts a section of the array and returns the new array. |
toString() | Returns a string representing the source code of the specified array and its elements. |
toLocaleString() | Returns a localized string representing the array. |
TypeScript Accessing Array Elements
To direct retrieve an array value, we use its index. The array elements can be accessed using the index of an element. The array index starts from zero, so the index of the first element is zero, the index of the second element is one, and so on. Suppose we have stored a value in the vegs array at index 4, vegs[4] should return the stored value.
let vegs: string[] = ['Potato', 'Tomato', 'Onion', 'Garlic', 'Chilli', 'Cabbage'];
console.log(vegs[0]);
console.log(vegs[1]);
console.log(vegs[2]);
console.log(vegs[6]);
Output of the above code:
Potato
Tomato
Onion
undefined
TypeScript Array Traversal
We can use the for...in loop to traverse through an array.
let vegs: string[] = ['Potato', 'Tomato', 'Onion', 'Garlic', 'Chilli', 'Cabbage'];
for(var index in vegs)
{
console.log(vegs[index]);
}
Output of the above code:
Potato
Tomato
Onion
Garlic
Chilli
Cabbage
We can also use for loop to iterate through an array.
let fruits: string[] = ['Apple', 'Banana', 'Orange', 'Kiwi', 'Guava'];
for(var i = 0; i < fruits.length; i++)
{
console.log(fruits[i]);
}
Output of the above code:
Apple
Banana
Orange
Kiwi
Guava
Related Articles
Generate random numbers in JavaScriptJavascript window location
Remove duplicates from array Javascript
Scientific calculator JavaScript
How to reverse string in JavaScript
JavaScript display PDF in the browser using Ajax call
Parsing JSON in Javascript
Javascript speech recognition example
Select/deselect all checkboxes using Javascript
Print specific part of a web page in javascript
Dynamically Add/Delete HTML Table Rows Using Javascript
jQuery Ajax serialize form data example
Image popup on page load using HTML and jQuery
Ajax live data search using jQuery PHP MySQL
jQuery loop over JSON result after AJAX Success
Simple star rating system using PHP, jQuery and Ajax
jquery image zoom on mouseover example
Bootstrap star rating input example
Bootstrap datepicker example
Submit a form data without page refresh