Introduction to arrays in TypeScript

Publication date: 01 - 11 - 2023

What is an array in TypeScript?

An array is a collection of elements that share something in common, this data can be of any type but TypeScript is able to restrict the type of data that an array can have. How is this? 🤔 Unlike JavaScript, in TypeScript you can store only one type of data in an array if you create an array explicitly; in inferred form it can accept any type of data. If you are not clear how is the creation/declaration of variables in TypeScript in explicit and inferred form check this post: Inferred and explicit variable creation in TypeScript.

How do I create an Array in TypeScript?

Creating an array of inferred form in TypeScript

This way of creating an array is exactly the same as how to create an array in JavaScript.

// 1) Declare the array variable
// 2) Choose the appropriate name for the variable
// 3) Use the assignment operator =
// 4) Open and close with square braces [] the data inside the array
// 5) Close with ;

let data = ["Your data collection inside the array"];

Let's check some examples to see what happens with this way of creating arrays.

let numbers = [0,1,2,3,4];
let strings = ["a","b","c","d","e"];
let anything = [37,"Chuck Norris",true,"https://media.giphy.com/media/9xttCtcnZIwNZUPs24/giphy.gif"];

TypeScript powers will in a way discover the data type of these three arrays. In the first example numbers the language will identify it as of type number; in the second example strings it will identify it as of type string and the last example anything it can identify it as of type any or infer the three data types it has.

let numbers = [0,1,2,3,4];// number[]
let strings = ["a","b","c","d","e"];// string[]
let anything = [37,"Chuck Norris",true,"https://media.giphy.com/media/9xttCtcnZIwNZUPs24/giphy.gif"];// any[] || (string | number | boolean)[]

Note: You can mouse over the variable name in your IDE to see what type of data TypeScript is inferring. 👆🏻

This might lead us to the following question: how many types of arrays are in TypeScript?

Itself, it is not that there are different types of arrays but different ways to create them and for that we must know the explicit form.

Creating an array explicitly in TypeScript

We can be very specific when creating an array, it can give us an advantage for data manipulation in the future since we will only be handling the same data type.

To create an array explicitly we will follow the following steps:

  1. The array variable is declared with the appropriate name.
  2. Use the colon ( : ) to define the data type.
  3. The data type to be contained in the array is chosen.
  4. As an array, square brackets [] are defined after the datatype
  5. Assign the data within the array

Array of strings in TypeScript

const array_of_strings:string[] = ["a","b","c","d","e"];

Array of numbers in TypeScript

const array_of_numbers:number[] = [0,1,2,3,4];

Array of any data type in TypeScript

const array_of_any:any[] = [0,"a string",false,!0];

Although the type any can be used we can be strict and specific for these arrays containing different types of data.

const array_of_any:(number|string|boolean)[] = [0,"a string",false,!0];

Array of objects in TypeScript

For objects we have to make a separate point because they involve other topics such as models or interfaces and type assertion (which we will see in later articles), but let's not get too complicated and explore the basics.

Like the other data types, we can create an array of objects in an inferred way and in an explicit way. Let's look at their differences. 👀

// Explicit form

const array_of_objects1:object[] = [
  {
    property1:"A random value",
    property2:"Another random value",
  },
  {
    property1:"A random value 2",
    property2:"Another random value 2",
  },
  {
    property1:"A random value 3",
    property2:"Another random value 3",
  },
];
// Inferred form

const array_of_objects2 = [
  {
    property1:"A random value",
    property2:"Another random value",
  },
  {
    property1:"A random value 2",
    property2:"Another random value 2",
  },
  {
    property1:"A random value 3",
    property2:"Another random value 3",
  },
];

In both cases you can use methods for arrays but only in the inferred form example you can access the properties of the object.

If you are reading this section of the blog is because you know a little about JavaScript, and I have good news for you, the methods for arrays in TypeScript work the same way as in JavaScript. Take a look at this article: Array methods in JavaScript. Later we'll look at the behavior of typing when manipulating arrays with TypeScript. 🧐

Back