Using arrays

Another common type we use is arrays. We learn two different methods to create array types in this lesson before understanding how array type inference works. We will also use the array type to create a strongly typed function rest parameter.

Arrays can hold mixed value types

Before we learn how to create a strongly-typed array, let's look at an array that has been declared without a type annotation in the exercise below:

Open exercise in CodeSandbox

The code constructs an array containing three different values, all having different types.

Using the Array generic type

We can use a type annotation to specify that an array should only contain items of a specific type. There is an Array generic type that we can use to do this.

Generic types are types that contain parameters. This means the type can be used in many situations.

Later in this course, there is a whole module on generic types, so don't worry if you are struggling to understand this concept at the moment.

We pass the type we want the items to have in angle brackets after the word Array.

• Enter the code below into the editor:

Copy
const numbers: Array<number> = [];
numbers.push(1);
numbers.push("two");
numbers.push(false);

• Overwrite the code in the editor with a slightly different approach of constructing the array:

Copy
const numbers: Array<number> = [1, "two", false];
console.log(numbers);

Using the square bracket notation

There's an alternative and arguably simpler method of creating strongly-typed arrays which is to put the type of the array items followed by square brackets:

Copy
const items: number[] = [];

• Use the square bracket notation to create a variable called strings that is assigned to an array of strings containing "one", "two", and "three" in the code editor.

Using type inference

• Put the code below into the editor:

Copy
const array = [1, 2, 3];
console.log(array);

So, TypeScript can cleverly infer the type of an array.

Neat!

• Use type inference to create an array of strings containing "one", "two", and "three".

Strongly-typing rest parameters

We can use an array type annotation to strongly-type function rest parameters.

The plain JavaScript function below takes the name of a person and a varying number of scores and then outputs these to the console:

Copy
function logScores(firstName, ...scores) {
  console.log(firstName, scores);
}
logScores("Ben", 50, 75, 85); // outputs Ben and [50, 75, 85]

• Copy and paste the function implementation into the code editor.

• So, strongly-type all the parameters in the function implementation.

• With the strongly-typed implementation of the function, try to invoke it with the code below:

Copy
logScores("Mike", 90, 65, "65");

Summary

If we assign values when declaring an array, TypeScript can infer the type of the array items. When using type inference, it is crucial to check that TypeScript has inferred the type as we expect by hovering over the value.

If we aren’t assigning array items during an array declaration, we can use a type annotation by using the square bracket notation or the Array generic type to inform TypeScript of what the type should be.

Array type annotations can also be used to strongly-type a function's rest parameters.

Further information about the array type can be found in the TypeScript handbook.

In the next lesson, we will learn how to create strongly-typed tuples.