Typescript: Array & Tuples

In this article, We are going learn about how you can use type in Array and there is a special thing that is Read only Array. In which you can’t manipulate the values. In addition, I’ll talk about Tuples as well. How you can use it?

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Arrays

To create an Array of a certain type there is a special syntax for that:

let variableName: arrayType[] = []

// For example: 
let num: number[] = [1,2,3]
let name: string[] = ["sam", "john"]

As shown in the above example that you can define the array’s type by using the type followed by square brackets (number[])

This is simple right? Let’s look at some other concepts. Let’s look at the Dos and Don’ts of an Array:

// ❌ DON'T 
// If you define an array like this then the type will be 'never'
// which means you can't push anything
let num:[] = []
num.push(1) // ERROR


let num:number[] = []
num.push(1)
num.push("232")  // ❌ ERROR : rgument of type 'string' is not assignable


let names:string[] = []
names.push("john")
names.push(1)   // ❌ ERROR : rgument of type 'number' is not assignable

/* -----------Let's Add Objects into Array-------- */
type User ={
    name: string,
    email: string,
}

// ✅ That's how you can define an array of objects
const allUsers: User[] = [];

// ✅ CORRECT
allUsers.push({name: "sam", email:"sam@hello.com"})
// ❌ ERROR: email property missing
allUsers.push({name: "sam"})
// ❌ ERROR: missing name & email
allUsers.push({})

The above example shows how you can use Array. There is one more way to create an Array:

let newArray: Array<number> = []
let nameArray: Array<string> = []
let allUsers: Array<User> = []

It means that creating an Array of the defined type in <>.

Readonly Array

The ReadonlyArray is a special type that describes arrays that shouldn’t be changed.

let players: ReadonlyArray<string> = ["ronaldo", "messi"]
// or
let  players: readonly string[] = ["ronaldo", "messi"];  

// ❌ Can't do that
players[0] = "jordon";
players.push("shaq")

// ✅ Can do 
console.log(players[0]);

In the above code, there are two methods from which you can define the readonly Array.

At the End of this section, I want to add one more thing to this. What if we want a nested Array means Array inside an array? You can do that as shown in the following code:

const cords: number[][] = [
    [22, 55],
    [45, 22]
]

const data: number[][][] = [
    [[22], [25, 65]],
    [[99, 34, 56], [12, 9]],
]

You can define the nested array as shown in the above code. You can nest as many arrays as you want. And if you want them to be different types then you need to create a type for them.

Wrapping up

In this article, I explained how you can use type in Array and there is a special thing that is Read only Array. In which you can’t manipulate the values. In addition, I’ll talk about Tuples as well. How you can use it?