Array Type in TypeScript

An array is a collection of multiple values stored under one variable.

let numbers: number[] = [
    10,
    20,
    30
];

Here, numbers contains three numeric values.

The number[] syntax is used for an array containing numbers.

let marks: number[] = [
    80,
    75,
    90,
    85
];

console.log(marks);

Every element in this array must be a number.

The string[] syntax is used for an array containing strings.

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

console.log(students);

You can create an array containing Boolean values using boolean[].

let results: boolean[] = [
    true,
    false,
    true
];

console.log(results);

You can explicitly specify the type of an array.

let ages: number[] = [
    18,
    20,
    22
];

The : number[] annotation tells TypeScript that the array contains numbers.

TypeScript can automatically infer the type of an array from its initial values.

let numbers = [
    10,
    20,
    30
];

TypeScript infers this as a number array.

When creating an empty array, you can specify its type explicitly.

let marks: number[] = [];

The array can now receive number values.

The push() method adds one or more elements to the end of an array.

let numbers: number[] = [
    10,
    20
];

numbers.push(30);

console.log(numbers);

Output:

[10, 20, 30]

You can add multiple values using push().

let students: string[] = [
    "Amit"
];

students.push(
    "Rahul",
    "Priya"
);

console.log(students);

The pop() method removes the last item from an array.

let numbers: number[] = [
    10,
    20,
    30
];

numbers.pop();

console.log(numbers);

Output:

[10, 20]

The length property returns the number of elements in an array.

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

console.log(students.length);

Output:

3

Array elements are accessed using their index. The first element has index 0.

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

console.log(students[0]);
console.log(students[1]);

Output:

Amit
Rahul

You can change an element by using its index.

let marks: number[] = [
    70,
    80,
    90
];

marks[0] = 85;

console.log(marks);

Output:

[85, 80, 90]

A for loop can be used to access every array element.

let numbers: number[] = [
    10,
    20,
    30
];

for (let i = 0; i < numbers.length; i++) {

    console.log(numbers[i]);

}

The for...of loop provides a simple way to access array values.

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

for (const student of students) {

    console.log(student);

}

The includes() method checks whether an array contains a particular value.

let numbers: number[] = [
    10,
    20,
    30
];

console.log(
    numbers.includes(20)
);

Output:

true

The indexOf() method returns the index of a value.

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

console.log(
    students.indexOf("Rahul")
);

Output:

1

The slice() method creates a new array containing a selected portion of an array.

let numbers: number[] = [
    10,
    20,
    30,
    40
];

let result: number[] =
    numbers.slice(1, 3);

console.log(result);

Output:

[20, 30]

The join() method combines array elements into a string.

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

let result: string =
    students.join(", ");

console.log(result);

Output:

Amit, Rahul, Priya

The map() method creates a new array by applying a function to every element.

let numbers: number[] = [
    1,
    2,
    3
];

let doubled: number[] =
    numbers.map(
        (number: number) => number * 2
    );

console.log(doubled);

Output:

[2, 4, 6]

The filter() method creates a new array containing elements that satisfy a condition.

let marks: number[] = [
    30,
    60,
    80,
    35
];

let passed: number[] =
    marks.filter(
        (mark: number) => mark >= 40
    );

console.log(passed);

Output:

[60, 80]

An array can contain objects with a defined structure.

let students: {
    name: string;
    age: number;
}[] = [

    {
        name: "Amit",
        age: 20
    },

    {
        name: "Rahul",
        age: 21
    }

];

This is useful when working with structured data.

TypeScript provides readonly arrays when you do not want the array itself to be modified through that reference.

let numbers: readonly number[] = [
    10,
    20,
    30
];

Methods that modify the array, such as push(), cannot be used on a readonly array.

Functions can receive arrays as parameters and return arrays.

function doubleNumbers(
    numbers: number[]
): number[] {

    return numbers.map(
        (number: number) => number * 2
    );

}

console.log(
    doubleNumbers([1, 2, 3])
);

Arrays can be used as properties inside objects.

let student: {
    name: string;
    marks: number[];
} = {

    name: "Rahul",

    marks: [
        80,
        75,
        90
    ]

};

console.log(student.marks);

Arrays are frequently used in React applications to store lists of items.

const students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

function App() {

    return (
        <div>

            {students.map(
                (student: string) =>
                    <p key={student}>
                        {student}
                    </p>
            )}

        </div>
    );

}

Arrays are very important in React Native applications. They can store users, products, students, messages, posts, and API data.

const students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

students.map(
    (student: string) => {

        console.log(student);

    }
);

React Native's FlatList commonly works with arrays of data.

import { FlatList } from "react-native";

const students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

<FlatList
    data={students}
    renderItem={({
        item
    }) => (
        <Text>
            {item}
        </Text>
    )}
/>

Typing array data correctly becomes especially useful when working with larger React Native applications.

Mistake 1: Adding the wrong type of value.

let numbers: number[] = [
    10,
    20
];

// Error
// numbers.push("30");

Mistake 2: Assigning a string array to a number array.

let numbers: number[] = [
    10,
    20
];

// Error
// numbers = ["10", "20"];

Always make sure that array elements match the declared array type.