TypeScript List with Examples

TypeScript List with Examples

by

What is a list in TypeScript?

A list is typically represented using arrays in TypeScript that are capable of storing multiple elements.

Since TypeScript doesn’t support the List data type like other programming languages, we can perform list functionality with arrays.

These elements can be of various types, encompassing numbers, strings, objects, and even arrays themselves.

Lists offer a versatile method for arranging and handling sets of data.

How to Declare a List in TypeScript?

We can declare a list in TyspeScript by using square brackets.

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

Let me give you an example:


let numbers: number[] = [10, 20, 30, 40, 50]; ✅

As you can see, we use the let keyword next with the variable name, a colon, and the type of data that a list will store.

How to Access a List Elements in TypeScript?

To access the elements TypeScript list we have to use the index of the element we want to access.

Please take note that, the index should start from zero, so the first element is at index zero, the second at index one, and so on.

Here’s an overview to access list elements:

let subjects: Array<string> = ['Programming', 'Web Development', 'Software Development', 'Computer Engineering'];
console.log(subjects[0]); ✅

Output:

Programming

How to Add and Remove Elements in TypeScript?

Adding Elements to a List:

To add elements to a list, we can use the push() method.

This method will append new items to the end of the list.

Here’s an example:

let subjects: Array<string> = ['Programming', 'Web Development', 'Software Development', 'Computer Engineering'];
subjects.push('Math'); ✅
console.log(subjects);

As you can see, we added another subject which is “Math”.

Output:

[
  'Programming',
  'Web Development',
  'Software Development',
  'Computer Engineering',
  'Math'
]

Aside from using the push() method, we can also utilize the splice() method to insert one or more elements at a specific position in the list.

For example:

let subjects: Array<string> = ['Programming', 'Web Development', 'Software Development', 'Computer Engineering'];

// Using splice() to insert 'Math' at index 2
subjects.splice(2, 0, 'Math'); ✅

console.log(subjects);

As you see, the splice() method is used to insert ‘Math’ at the 2nd index of the subjects array.

The first argument to splice() is the index at which to start changing the array. The second argument is the number of elements to remove (0 in this case, as we don’t want to remove any elements).

Output:

[
  'Programming',
  'Web Development',
  'Math',
  'Software Development',
  'Computer Engineering'
]

Removing Elements to a List:

To remove elements in TypeScript from a list we can use the splice() method, which modifies the original list by removing or replacing existing elements and/or adding new elements.

As we mentioned above, the splice() method requires two arguments: the first argument is the index of the element to remove and the second argument is the number of elements to remove.

Here’s an example:

let subjects: Array<string> = ['Programming', 'Web Development', 'Software Development', 'Computer Engineering'];
subjects.splice(0, 1); ✅
console.log(subjects);

As you can see in our given example, we are trying to remove the “Programming” from the subjects list.

That is why, we use the first argument which is (0), and the second argument which is (1), mainly because we are just trying to remove the first subject and only 1 subject.

Output:

[ 'Web Development', 'Software Development', 'Computer Engineering' ]

Apart from that, we can also utilize the indexOf() method to remove the element from the list.

Here’s an illustration:

let subjects: Array<string> = ['Programming', 'Web Development', 'Software Development', 'Computer Engineering'];
let position = subjects.indexOf('Web Development'); ✅
if (position !== -1) {
  subjects.splice(position, 1); ✅
}
console.log(subjects);

As you can see, the indexOf() method is used to find the position of the element “Web Development“.

If the element is found (e.g., position !== -1), it is removed using splice().

What are the Common Operations on the TypeScript List?

We can perform several common operations on lists (arrays) in TypeScript

1. Finding an element in a list

The indexOf() method can be used to find the position of an element in the list. If the element is not present, indexOf() returns -1.

Here’s an example:

let grades: number[] = [80, 85, 90, 95, 99];
let sample = grades.indexOf(99);  ✅
console.log(sample);

Since grade 99 is in the list it will provide the correct output however, if the element is not present in the list the result would be -1.

Output:

4

2. Determining List Size

To determine the size of the list we can use the length property which gives the count of elements in the list.

For example:

let grades: number[] = [80, 85, 90, 95, 99];
console.log(grades.length); ✅

Output:

5

3. Iterating Lists

To iterate the lists we can utilize either a for loop or forEach() method to go through the elements in the list.

Here’s an example:

let grades: number[] = [80, 85, 90, 95, 99];
grades.forEach((grades) => {  ✅
  console.log(grades);
});

Output:

80
85
90
95
99

4. Filtering Lists

To filter the lists we can use the filter() method to create a new list with all elements that pass a certain condition.

Here’s an example:

let grades: number[] = [80, 85, 90, 95, 99];
let evenGrades = grades.filter((grades) => grades % 2 === 0); ✅
console.log(evenGrades);

Output: 

[ 80, 90 ]

Now, let’s try in odd:

let grades: number[] = [80, 85, 90, 95, 99];
let oddGrades = grades.filter((grades) => grades % 2 !== 0); ✅
console.log(oddGrades);

Output:

[ 85, 95, 99 ]

5. Sorting and Reversing:

The sort() method sorts the elements in the list.

The reverse() method changes the order of the elements to the opposite.

let grades: number[] = [90, 99, 80, 95, 85];
grades.sort(); ✅
console.log(grades);  
grades.reverse(); ✅
console.log(grades);

Output:

[ 80, 85, 90, 95, 99 ]
[ 99, 95, 90, 85, 80 ]

6. Merging and Splitting Lists:

To merge the list we can use the concat() method to merge two or more lists.

On the other hand, to split the lists we can use The slice() method returns a copy of a portion of a list.

For example: 

let grades1: number[] = [80, 85, 90, 95, 99];
let grades2: number[] = [81, 82, 91, 92, 97];

let merged = grades1.concat(grades2);
console.log(merged); 
let portion = merged.slice(1, 4);
console.log(portion);

Output:

[
  80, 85, 90, 95, 99,
  81, 82, 91, 92, 97
]
[ 85, 90, 95 ]

Conclusion

In conclusion, we have finally discussed the TypeScript list, represented as arrays, which are powerful and flexible structures for managing collections of data, with various methods available for manipulating and accessing the data.

They are a fundamental part of programming in TypeScript.

I hope this article has helped you understand the TypeScript list.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

Leave a Comment