🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

This tutorial shows how to work with Arrays in Typescript with examples.

Note: To run or execute source code examples of this tutorial, follow How to Run the TypeScript Code guide.

TypeScript supports arrays, similar to JavaScript. There are two ways to declare an array:

Using square brackets. This method is similar to how you would declare arrays in JavaScript.

//  Using square brackets
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs); // [ 'C', 'C++', 'Java', 'JavaScript' ]

Using a generic array type, Array.

// Using a generic array type, Array<elementType>.
let programmingLangs: Array<string> = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs); // [ 'C', 'C++', 'Java', 'JavaScript' ]

Both methods produce the same output.

Learn more about TypeScript at TypeScript Tutorial with Examples.

Create an Array
Add elements to an array
Multi-Type Array
Access Array Elements
Iterate Through Array
Clone Array
Merge Arrays

1. Creating an Array

Example: Array inline declaration and initialization

// array inline declaration and initialization
//  Using square brackets
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs);
// Using a generic array type, Array<elementType>.
let programmingLangs1: Array<string> = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs1);

Example: Array declaration and initialization in separate lines

let programmingLangs : string[];
programmingLangs = ['C', 'C++', 'Java', 'JavaScript'];

let programmingLangs: Array<string>;
programmingLangs = ['C', 'C++', 'Java', 'JavaScript'];

2. Adding elements to an Array

To add more elements to an array, use the push() method.

Example: Add an element to an array

// Add elements to array example
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
programmingLangs.push('Python');
programmingLangs.push('Kotlin');

3. Multi-Type Array

An array in TypeScript can contain elements of different data types using a generic array type syntax.

Example: Multi Type Array

let values: (string | number)[] = ['Apple', 2, 'Orange', 3, 4, 'Banana']; 
// or 
let values: Array<string | number> = ['Apple', 2, 'Orange', 3, 4, 'Banana'];

4. Access Array Elements

The array elements can be accessed using the index of an element e.g. ArrayName[index]. 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.

Example: Access Array Elements

// Access Array Elements
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs[0]); // C
console.log(programmingLangs[1]); // C++
console.log(programmingLangs[2]); // Java
console.log(programmingLangs[3]); // JavaScript
console.log(programmingLangs[4]); // undefined

// Access Array Elements using Loop
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
programmingLangs.forEach(element => {
    console.log(element);
});

// Access Array Elements using Loop
for(let element of programmingLangs){
    console.log(element);
}

Iterate or Loop Through Array

Example: Using forEach() method

// Iterate Through Array
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];

// using forEach() method
programmingLangs.forEach(element => {
    console.log(element);
});

Example: Using “for…of” loop

// Using “for…of” loop
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
for(let element of programmingLangs){
    console.log(element);
}

Example: Using traditional for loop

// Using traditional for loop 
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
for (var i = 0; i < programmingLangs.length; i++) {
    console.log(programmingLangs[i]);    
}

5. Clone Array

Use spread operator to clone array. It’s the easiest and recommended way.

Example: Clone Array Example

let numbers :number[] = [10, 20, 30, 40,50];   
 
let clonedNumbers = [...numbers];
 
console.log(clonedNumbers);     // [ 10, 20, 30, 40, 50 ]
 
numbers.push( 60 );
numbers.push( 70 );
 
console.log(numbers);       // [ 10, 20, 30, 40, 50, 60, 70 ]
console.log(clonedNumbers);     // [ 10, 20, 30, 40, 50 ]

Merge Arrays

Use spread operator for merging arrays as well. It’s simplest and recommended way.

Example: Merge two array

// Merge Arrays
let numbers1 :number[] = [10, 20, 30, 40,50];   
let numbers2 :number[] = [60, 70, 80, 90];  
let mergedNumbers = [...numbers1, ...numbers2];
console.log(mergedNumbers); // [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]

Conclusion

In this tutorial, we have seen how to create an array, how to add elements, how to access an array, how to loop an array, how to copy an array and how to merge an array with examples.

Learn more about TypeScript at TypeScript Tutorial with Examples.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

TypeScript Array Tutorial with Examples

Table of contents

1. Creating an Array

Example: Array inline declaration and initialization

Example: Array declaration and initialization in separate lines

2. Adding elements to an Array

Example: Add an element to an array

3. Multi-Type Array

Example: Multi Type Array

4. Access Array Elements

Example: Access Array Elements

Iterate or Loop Through Array

Example: Using forEach() method

Example: Using “for…of” loop

Example: Using traditional for loop

5. Clone Array

Example: Clone Array Example

Merge Arrays

Example: Merge two array

Conclusion

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

ChatGPT + Generative AI + Prompt Engineering for Beginners

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

Building Real-Time REST APIs with Spring Boot - Blog App

Building Microservices with Spring Boot and Spring Cloud

Java Full-Stack Developer Course with Spring Boot and React JS

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

Testing Spring Boot Application with JUnit and Mockito

Spring Boot Thymeleaf Real-Time Web Application - Blog App

Master Spring Data JPA with Hibernate

Spring Boot + Apache Kafka Course - The Practical Guide

Java Testing: Mastering JUnit 5 Framework

Reactive Programming in Java: Spring WebFlux and Testing

Spring Boot + RabbitMQ Course - The Practical Guide

Functional Programming in Java (Includes Java Collections)

ChatGPT for Java Developers: Boost Your Productivity with AI

Comments

Post a Comment

Spring Boot 3 Paid Course Published for Free on my Java Guides YouTube Channel

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel