How to Use TypeScript Const Arrays?

In this tutorial, I will explain how to use the const arrays in TypeScript. I will also show you some examples of using const arrays in TypeScript.

What is a Const Array in TypeScript?

Let me first explain what a const array is in TypeScript. The const keyword in TypeScript is used to declare variables that are not meant to be reassigned. When applied to arrays, it means that the reference to the array cannot be changed, but the contents of the array can still be modified.

Why Use Const Arrays in TypeScript?

Using const arrays can help prevent accidental reassignments, which can lead to fewer bugs and more maintainable code. For instance, if you have a list of states in the USA that shouldn’t change, declaring it as a const array ensures the reference remains constant throughout your code.

Declare a Const Array in TypeScript

Let’s start by declaring a simple const array. Suppose we have a list of popular cities in the USA:

const cities: string[] = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];

In this example, the array cities is declared as a const. This means that while we cannot reassign the cities variable to a new array, we can still modify its contents.

Check out TypeScript Array of Arrays

Modify a Const Array in TypeScript

Now, let me show you how to modify a const array in TypeScript with some examples.

Add Elements

You can add elements to a const array using methods like push:

const cities: string[] = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
cities.push("San Francisco");
console.log(cities); // ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "San Francisco"]

Here is the exact output in the screenshot below:

Remove Elements

You can also remove elements using methods like pop:

cities.pop();
console.log(cities); // ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"]

Update Elements

Updating elements in a const array is straightforward:

cities[0] = "San Diego";
console.log(cities); // ["San Diego", "Los Angeles", "Chicago", "Houston", "Phoenix"]

Read Concatenate Arrays in TypeScript Using concat()

Common Issues and How to Solve Them

Now, let me show you how to fix some common issues while working with const arrays in TypeScript.

Issue 1: Attempting to Reassign a Const Array

One common mistake is trying to reassign a const array, which will result in an error:

const states: string[] = ["California", "Texas", "Florida"];
states = ["New York", "Illinois"]; // Error: Cannot assign to 'states' because it is a constant.

Here is the exact output in the screenshot below.

Solution

To avoid this issue, ensure that you do not attempt to reassign the const array. If you need a new array, consider using let instead of const.

Issue 2: Confusion Between Const Arrays and Immutable Arrays

Another common misconception is that const arrays are immutable. While the reference to the array is immutable, the contents are not.

Solution

If you need an immutable array, consider using libraries like Immutable.js or creating a new array with spread syntax:

const newStates = [...states, "New Jersey"];
console.log(newStates); // ["California", "Texas", "Florida", "New Jersey"]

Read Convert a Map to an Array in TypeScript

Best Practices for Using TypeScript Const Arrays

Here are some of the best practices you should follow while using const arrays in TypeScript.

Use Descriptive Names

Always use descriptive names for your const arrays. This makes your code more readable and maintainable. For example:

const usPresidents: string[] = ["George Washington", "John Adams", "Thomas Jefferson"];

Avoid Reassigning Arrays

As mentioned earlier, avoid reassigning const arrays. If you need to create a new array, use methods like concat or the spread operator:

const additionalPresidents = ["James Madison", "James Monroe"];
const allPresidents = [...usPresidents, ...additionalPresidents];
console.log(allPresidents); // ["George Washington", "John Adams", "Thomas Jefferson", "James Madison", "James Monroe"]

Use Type Annotations

Type annotations can make your code more robust and easier to understand. Always specify the type of elements in your const arrays:

const zipCodes: number[] = [10001, 90001, 60601, 77001, 85001];

Read How to Find an Object in an Array by Property in TypeScript?

TypeScript Const Array Examples

Here are some examples of Typescript const arrays.

Example 1: Manage a List of USA States

Suppose you’re building an application that requires a list of USA states. You can use a const array to store this list:

const usaStates: string[] = [
  "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut",
  "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa",
  "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan",
  "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire",
  "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio",
  "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
  "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia",
  "Wisconsin", "Wyoming"
];

Example 2: Handle a List of USA Landmarks

If you’re developing a travel app, you might need a list of famous landmarks in the USA:

const landmarks: string[] = [
  "Statue of Liberty", "Grand Canyon", "Yellowstone National Park", "Mount Rushmore",
  "Golden Gate Bridge", "Empire State Building", "Niagara Falls", "Walt Disney World",
  "Times Square", "Hollywood Sign"
];

Conclusion

In this tutorial, I explained how to use the const arrays in Typescript with some examples. Remember to use descriptive names, avoid reassigning arrays, and utilize type annotations to make your code more robust. Feel free to experiment with const arrays in your projects and see how they can enhance your development process.

You may also like:

• 2D Arrays in TypeScript
• Create a Map from an Array in TypeScript

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/