EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript Array

TypeScript Array

Priya Pedamkar
Article byPriya Pedamkar

Updated June 14, 2023

TypeScript Array

Introduction to TypeScript Array

Suppose you have seen, we know that there are many data types. We can divide them as primitive and user-defined. The array comes under a user-defined data type. All the programming languages have an array as their data type. So the same concept we have in typescript. The general definition of an array is a collection of homogeneous data items in a single element. We all are familiar with the word array if you are from the computer world. So let’s take a deep dive into that.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

How to Declare an Array in TypeScript?

First, we are going to see the Syntax of Array in TypeScript. It was the same as we have in javascript. But with just one addition, and that is we are giving type.

Like Java, we have multiple ways to write arrays in TypeScript.

Syntax #1:

let colors: string[] = ["DourgerBlue", "NavyBlue", "SkyBlue"];
console.log(colors)

Output:

Typescript array

In the above example, we declared one variable with the let keyword of type string, and after that, we have given square brackets, which shows us it is a type of array. After that, it is an equal (=) sign, and we gave the values in square brackets separated by commas.

Syntax #2:

Now, in this type, we are explicitly writing an array.

let colors: Array<string> = ["DourgerBlue", "NavyBlue", "SkyBlue"];
console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);

Output:

Typescript array

In the above example, we gave the let keyword with the variable name after that colon(:) and specified the data type as an array, and the array type is a string.

We have different syntax in both of the above examples. You can use them interchangeably. There are some common steps to understand further. In the coming session, we will see what initializing arrays mean.

How to Initialize an array in TypeScript?

In the above two examples of syntax, we have seen that both declaration and initialization have been done simultaneously in a single line. Let’s scatter them and see how they will be implemented actually.

Syntax #1

Declaring array

let colors: string[];

Initializing array

colors = ['DourgerBlue', 'NavyBlue', SkyBlue];

Syntax #2

Declaring array

let colors: Array<string>

Initializing array

colors = ['DourgerBlue', 'NavyBlue', SkyBlue];

We can declare and initialize the array separately or can be in the same line in a combined manner also.

It is just a matter of syntax and style of programming we need.

How to Access Array Elements?

Till now, we know how to declare and initialize the array. Now here comes the main part. In Programming, of course, we need to do some operations. Performing some operations on array elements, we need to access them. To access these elements, we need to understand their structure of it.

As we know, we can store multiple elements in a single variable. But those elements get identified by one unique number starting from zero(0). These numbers are known as the index no of an array element.

To be more precise, consider the int array containing 5 nos.

let toffee: number [] = [1,2,3,4,5];

Now, toffee is an array that has five elements.

Let’s see if it is a memory representation to access the array elements.

Memory representation

In the above diagram, we have index no. With the help of these indexes no, we can access a particular element in an array.

Example:

let toffee: number [] = [1,2,3,4,5];
console.log(toffee[0]);
console.log(toffee[1]);
console.log(toffee[2]);
console.log(toffee[3]);
console.log(toffee[4]);

Output:

Toffee

Logging this to the console will give you the desired output.

Various Methods of Typescript Array

There are some predefined methods in the array which help us to get output efficiently. Following is the list of these methods.

  • filter(): This function mainly works when you want to modify the existing array and create a new one. It will transform the existing values with the new condition.
  • every(): This function is mainly used for testing purposes. It checks for every element in an array that is true or not.
  • forEach(): This works similarly to for loop but works on each element in the array.
  • concat(): As the name suggests, it concretes the array values of two different arrays and returns a new array.
  • indexOf(): As we have seen, that array has an index value. This method returns the index of an element in an array.
  • lastIndexOf(): As we know array has no elements. This method gives a maximum index value of the array. Nothing but the index no of the last value in the array.
  • join(): This method joins all array elements and returns with a specified separator.
  • push(): If you have worked with an array earlier, you must know about this method. This method adds one or more elements to the array at the last of the array.
  • map(): This function returns the new array. And this new array is the output of the condition provided in the map.
  • pop(): This method is used to get an array’s last element and remove it from the array.
  • reverse(): As the name suggests, it simply makes the array in reverse format.
  • reduceRight(): It applies to the array to reduce the array elements from the right. /it reduces the given array to a single value.
  • reduce(): It works the same as the above function reduceRight. But in the opposite direction.
  • shift(): It is the opposite of pop; it removes the first element from an array. It returns the removed elements.
  • slice(): We can take a piece from an array and return that new array by this function.
  • splice(): With this method, we can add or remove an array element.
  • sort(): Sorting of array elements implemented by this function.
  • some(): In the testing scenario, returns true if at least one condition is true.
  • unshift(): This method helps to add elements at the start of the array and return a new array.
  • toString(): It converts the array elements to string and returns it.

Recommended Articles

This is a guide to TypeScript Array. Here we discuss how to Initialize an array in TypeScript? and the Various Methods of Typescript Array along with Outputs. You can also go through our other related articles to learn more–

  1. String Array in JavaScript
  2. JavaScript indexOf()
  3. pop() in JavaScript
  4. TypeScript Functions
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more