How Do I Access a List in TypeScript?

In TypeScript, the “List” refers to an abstract data type that allows the users to store a collection of elements. It is similar to the built-in “array” data type. It is used to process and manipulate data in a well-organized manner. It allows the users to perform standard operations on it such as adding/inserting, removing, and accessing elements according to the user requirements.

This guide illustrates how to access a list in TypeScript.

How Do I Access a “List” in TypeScript?

To access an array, set, tuples, and map data structures as a list the user needs to specify their names without passing any index. If the user wants to access any individual element then pass the index of that element alongside the list name.

Let’s see the practical implementation of the discussed used cases. But before accessing a list, look at the following commands to transpile the “.ts” file in which the code is written and to execute the automatically generated “.js” file:

The file name mentioned in the above commands can be changed.

Example 1: Access an Array as a List

This example accesses an array as a list with the help of the given code block:

In the above code lines:

• An array named “languages” of “string” data type is initialized having a list of elements.
• Next, the “console.log()” method is utilized to display the created array as a list.

Output

It can be seen that the terminal shows an array list.

Example 2: Access Specific Array Element

Specify the element index alongside the “array” name to only access that element from the list:

In the above code lines, the index of the specific element is passed with the “array” name to access it.

Output

Now, the terminal shows only a particular element accessed from an array list.

Example 3: Access Map as List

The same process of “array” is followed to access “map”  interface key values as a list:

In the above code block:

• The “map” variable creates a map using the “Map” data structure that accepts only “number” and “string” data types’ key values.
• Next the map “set()” method sets the given key-value pairs respectively.
• Once the key-value pairs are set, the “console.log()” method specifies the “map” variable to display the key-value pairs of the created map interface as a list.

Output

The terminal displays the Map interface content as a list in the format of an array having keys and their assigned values.

Example 4: Access Specific Map key

The “Map” interface uses the  “get()” method to access the value of the specified key passed as its parameter:

Now, the “map.get()” method accesses the value of key “1”.

Output

Here, the terminal successfully displays the specified key’s value.

Example 5: Access Set as List

TypeScript “Set” data structure allows the users to set a list of distinct elements that can easily access by specifying the “set” name:

In the above code block:

• The “setNames” variable creates a new “Set” having multiple elements of the “String” data type.
• Next, the “console.log()” method uses the “setNames” variable as its argument to display the created Set data structure elements as a list.

Output

It is observed that the terminal shows “Set” data structure elements as a list.

Note: The user cannot access specific elements from the “Set” because it only stores elements, not their indexes like other(map, tuples, arrays) data structures. That’s why the user can only access it completely.

Example 6: Access Tuples as List

TypeScript “Tuple” is an advanced-level primitive data type that is similar to the arrays. This example accesses Tuples as a list:

In the above code block,  the “console.log()” method accesses the “newTuple” completely and displays all of its values.

Output

It can be seen that the terminal displays all the values of the “new tuple” as a list.

Example 7: Access Specific Tuple Element

To access a specific value from a tuple the user needs to specify the “index” of that value enclosed in the square braces like this:

Now, the “console.log()” method specifies the index of the element that the user wants to access from the “myTuple”.

Output

The terminal shows the specified value from Tuple using its index.

Conclusion

In TypeScript, “Array”, “Set”, “Tuples”, and “Map” are the practical implementations of the list that contains a variety of elements. To access them as a list, specify their names in the “console.log()” method as its argument. This method displays the content of the discussed data structures as a list. Moreover, the user can also retrieve only the desired element from the list by specifying its index with the array, map, or tuple data structures. This guide practically illustrated how to access a list in TypeScript.