How to create and manipulate TypeScript arrays - Featured Image
Web development4 min read

How to create and manipulate TypeScript arrays

Static typing helps the TypeScript compiler keep track of what kind of data goes into array items. This feature helps TypeScript arrays reduce mistakes in your code, so you can build safer and more reliable apps.

What are TypeScript arrays?

In TypeScript, arrays are just ordered lists of values. Like in JavaScript, you can use arrays in TypeScript to store groups of different things. You can put numbers, text, objects, or even other arrays inside them. The big plus with TypeScript is static typing, which means you can tell it exactly what kind of data should go in your array. This helps catch problems while you're still writing code.

Can change size easily

One thing that makes arrays really useful is that they can grow or shrink - you can add or remove items without having to decide how big the array should be from the start. TypeScript arrays let you change them by default, but you can also make arrays that don't change by using methods like map and filter. These fixed arrays are great when you want to make new arrays based on existing ones. Arrays give you a good way to organize your data and make it much easier to filter, sort, and go through items one by one.

Where you can use them

TypeScript arrays can also work as the base for building other data types like stacks (LIFO - Last-In-First-Out) and queues (FIFO - First-In-First-Out). They're really good for showing lists, tables, and groups in all kinds of apps. Since you can easily handle items that are all the same type, arrays become super helpful when you're working with data from outside sources like APIs or databases.

How to write TypeScript arrays

In TypeScript, you create arrays using words like let, const or var, then add a name and tell it what data type it should hold. When you set the data type, you're telling TypeScript what kind of items should go in the array. You do this with a colon. The actual items go inside square brackets and are split by commas.

The basic way to create a TypeScript array looks like this:

const arrayName: datatype[] = [item1, item2, ...];
  • arrayName is whatever name you pick for the array

  • datatype tells what data type the items in the array should have

  • [item1, item2, …] are the actual items or values that get stored in the array. These items should match the data type you set for the array

Here are some examples that show how it works:

// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const names: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];

What array methods can you use

TypeScript array methods are really useful and powerful because they let you work with, change and organize data in arrays easily. The following table shows you common array methods in TypeScript and how you can use them.

TypeScript array examples

TypeScript arrays are really important tools when it comes to organizing and working with data in apps. Let's look at some of the key things you can do.

Getting items from arrays

Getting array items in TypeScript is a basic thing that lets you get specific items within an array. You can get array items using their index, which shows their position in the array. In TypeScript, array indexes start from zero. This means that the first item has index 0 and the second item has index 1.

let myArray: number[] = [10, 20, 30, 40, 50];
// Getting items using index
let firstItem: number = myArray[0]; // Output: 10
let secondItem: number = myArray[1]; // Output: 20
let thirdItem: number = myArray[2]; // Output: 30
// Setting a new value to an array item
myArray[3] = 99; // 4th item in myArray = 99

Breaking down arrays

With array breaking down, you can quickly and easily take values from an array and put them into variables.

let numberArray: number[] = [1, 2, 3];
// Array breaking down
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Use values
console.log(firstNumber); // Shows 1
console.log(secondNumber); // Shows 2
console.log(thirdNumber); // Shows 3

Going through items in TypeScript arrays

Here is an example of how to go through an array in TypeScript using a for loop:

let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

In this example, we have the numbers array, which has numbers. We use a for loop to go through the array. The loop starts at i = 0, and we add 1 to i in each loop round. With numbers[i] we can get the right item of the array and show it.

This is what you see:

1
2
3
4
5
hassaankhan789@gmail.com

Frontend Web Developer

Posted by





Subscribe to our newsletter

Join 2,000+ subscribers

Stay in the loop with everything you need to know.

We care about your data in our privacy policy

Background shadow leftBackground shadow right

Have something to share?

Write on the platform and dummy copy content

Be Part of Something Big

Shifters, a developer-first community platform, is launching soon with all the features. Don't miss out on day one access. Join the waitlist: