Typescript: Array & Tuples

#typescript #webdev #beginners #tutorial

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.

Tuples

Tuple types are a type of array of known length where the different elements may have different types. A value of type [number, string] is guaranteed to have a length of 2, with a number at element 0 and a string at element 1. Let's look at the example:



let x: [number, string];

x = [110, "Mohan"]; // ✅ CORRECT 
x[0] = 120; // ✅ CORRECT 
x = ["Mohan", 110]; // ❌ ERROR: Initialize it incorrectly

Let's take another example of RGB. As you already know RGB takes three values that should be numbered.



let rgb: [number, number, number];

rgb = [225, 224, 10];       // ✅ CORRECT
rgb = [225, 224, "10"];     // ❌ ERROR: type 'string' is not assignable to type 'number'
rgb = [225, 224, 10, 40];   // ❌ ERROR : Source has 4 element(s) but target allows only 3

Issue with Tuples

Tuples sound great right? But they have a major flaw. TypeScript allows you to call methods like push(), pop(), shift(), unshift(), and splice() on values of tuple types.

If you don't understand what I am saying then let me show you with code example. I am taking the old example of RGB:



let rgb: [number, number, number];

// ✅ This is correct because it has all the values
rgb = [225, 224, 10];

// ❌ ERROR : Source has 4 element(s) but target allows only 3
// It is not allowed Right.
rgb = [225, 224, 10, 40];   

// Now let's do this:
rgb.push(50)
console.log(rgb)  // output: [225, 224, 10, 50]
// This is the flaw.

You can apply any Array method to Tuple. That's why it destroys the supposed guarantees of tuple types.

Don't only rely on Tuples. Use only when necessary.

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 also talked about Tuples as well and how you can use them?

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

Twitter	GitHub	LinkedIn	Instagram	Website	Newsletter	Support

Top comments (8)

Anthony Fung • Feb 8 '23

Great article!

I'd like to mention a side note. Using const when declaring variables is a great way to avoid accidentally overwriting it in a function. One thing that I've seen some people miss is that an array can be declared as const and it can still be pushed to - being const just means overwriting it will cause an error, but it can still be mutated.