How To Java

Arrays

Introduction

As we continue our exploration of TypeScript, we arrive at an essential concept: arrays. Arrays in TypeScript are slightly different from working with primitive types because they usually consist of multiple elements. Ensuring type consistency across all elements in an array is a key aspect of using TypeScript effectively.

Example:

let numbersArray = [1, 2, 3, 4];
let mixedArray = [10, 'twenty', [30]];

In the numbersArray, every element is of type number, making it straightforward to manage. On the other hand, the mixedArray contains elements of different types: a number, a string, and even another array. Both arrays are valid in JavaScript, but TypeScript helps us handle them more precisely by keeping track of the types of elements they contain.

Understanding TypeScript's Role

TypeScript makes it simple to manage arrays by allowing us to define the types of elements they should hold. Whether it's ensuring all elements are of the same type or accommodating arrays with different types of elements, TypeScript offers tools to maintain consistency and prevent type-related errors.

Before diving into these features, let's consider how challenging it might be to maintain type consistency without TypeScript's array typing capabilities. By manually keeping track of types, the code can become cumbersome and error-prone. Fortunately, TypeScript offers a better way.

Declaring Array Types

In TypeScript, you can specify the type of elements that an array will contain to ensure consistency. To do this, you add [] after the type of the elements. For example, if you want an array that only holds strings, you would write:

let usernames: string[] = ['Alice', 'Bob'];

Another way to define array types is using the Array<T> syntax, where T represents the type of the elements in the array:

let usernames: Array<string> = ['Alice', 'Bob'];

In this case, T is string, so the array can only contain string values. Although this method is less commonly used, it's good to be aware of it, especially if you come across it in other TypeScript code.

Type Errors with Arrays

TypeScript will alert you if you try to assign elements of the wrong type to an array. For example:

let usernames: string[] = [123, 456]; // Type Error!

Here, you'll get a type error because usernames is supposed to store strings, but you're trying to assign numbers instead.

Similarly, if you attempt to add an incorrect type to an array after it's been declared, TypeScript will flag it as an error:

let usernames: string[] = ['Charlie'];
usernames.push(100); // Type Error!

This error occurs because you're trying to push a number into an array that should only contain strings. TypeScript's type-checking helps you avoid such mistakes, making your code more reliable and easier to maintain.

Multi-dimensional Arrays

In TypeScript, we've seen how to create arrays containing strings (string[]), numbers (number[]), or booleans (boolean[]). But TypeScript also allows us to create more complex arrays, such as multi-dimensional arrays—arrays that contain other arrays as elements.

Here's an example of a multi-dimensional array that contains arrays of strings:

let stringArrays: string[][] = [['apple', 'orange'], ['grape', 'banana']];

You can think of string[][] as shorthand for (string[])[], meaning an array where each element is itself an array of strings. This setup is useful when dealing with grid-like structures or nested data.

Handling Empty Arrays

TypeScript also handles empty arrays well. An empty array ([]) can be assigned to any type of array, whether it`s for strings, numbers, or any other type. Here's how it works:

let colors: string[] = []; // No errors here.
let scores: number[] = []; // This is also fine.

Once you've declared these empty arrays, you can start populating them with values without worrying about type errors:

colors.push('blue');
scores.push(99);

The ability to work with both simple and complex arrays, along with TypeScript’s type-checking, helps maintain consistency and clarity in your code.

Tuples

Up until now, we've worked with arrays where all elements share the same type. However, JavaScript arrays are quite flexible, allowing elements of different types within the same array. TypeScript introduces a concept called tuples to handle this scenario, where an array can have a fixed sequence of types.

Here's an example of a tuple in TypeScript:

let myTuple: [string, number, boolean] = ['Hello', 42, true];

In the above example, myTuple is a tuple containing three elements: a string ('Hello'), a number (42), and a boolean (true). The type of myTuple is [string, number, boolean]. Tuples in TypeScript enforce both the order and the number of elements. If we deviate from this structure, TypeScript will throw an error.

let wrongTuple: [number, string] = [1, 'test', true]; // Error: Too many elements
let anotherTuple: [boolean, string, number] = [1, 'test', true]; // Error: Types don’t match

Differences Between Tuples and Arrays

Although tuples and arrays share some common behaviors, such as having a .length property and being index-accessible, they are treated differently in TypeScript. Tuples are not interchangeable with arrays, even if the array contains the correct types.

let tupleExample: [number, string] = [10, 'TypeScript'];
let arrayExample: string[] = ['JavaScript', 'TypeScript'];

tupleExample = [42, 'Answer']; // Works fine
tupleExample = arrayExample; // Error: Array cannot be assigned to a tuple

In the example above, even though arrayExample contains strings, it cannot be assigned to tupleExample because TypeScript requires tuples to strictly adhere to their defined structure.

By understanding and using tuples, you can add more precision and clarity to your TypeScript code when working with mixed-type arrays.

Type Inference with Arrays

TypeScript has a powerful type inference system that can deduce types from initial values and return statements. However, when it comes to arrays, the type inference may not always align with your expectations. Let's explore this with an example:

let quizResults = [true, false, true];

What type does TypeScript infer for quizResults? At first glance, it might seem like it could be a tuple type, [boolean, boolean, boolean], or a more flexible array type, boolean[]. In reality, TypeScript opts for the latter, boolean[], allowing you to modify the array later:

quizResults.push(false); // No type error, since quizResults is inferred as boolean[]

However, if you defined it as a tuple, adding extra elements would raise an error:

let fixedAnswers: [boolean, boolean, boolean] = [true, false, true];
fixedAnswers.push(false); // Type error! Tuples have a fixed length.

The key distinction here is that tuples enforce a specific length and type order, preventing additional elements from being added.

Type Inference with Array Methods

Type inference in TypeScript also extends to array methods like .concat(). Even if you start with a tuple, the result of these methods will be inferred as a standard array.

let numberTuple: [number, number, number] = [10, 20, 30];
let combinedArray = numberTuple.concat([40, 50, 60]); // combinedArray is inferred as number[]

In the example above, although numberTuple is a tuple, TypeScript infers combinedArray as an array of numbers, not as a tuple.

Key Points

Array Inference: When working with arrays, TypeScript usually infers them as standard arrays (T[]), even if the initial values could fit into a tuple type.
Flexibility vs. Fixed Structure: Arrays provide flexibility for adding elements, while tuples enforce a fixed length and structure.
Array Methods: Methods like .concat() will result in inferred array types, even when applied to tuples.

If you need a tuple's fixed structure, you'll typically need to declare it explicitly to ensure TypeScript enforces the intended constraints.

Rest Parameters

Rest parameters allow us to pass an indefinite number of arguments to a function, but managing their types is crucial for avoiding errors. Let's start with a simple example of a function without any type annotations:

function combineStrings(firstWord, ...additionalWords) {
  let result = firstWord;
  for (let i = 0; i < additionalWords.length; i++) {
    result = result.concat(additionalWords[i]);
  }
  return result;
}

This function takes an initial string and then concatenates any additional strings passed to it. For example:

combineStrings('Hello', ' ', 'World'); // Returns: 'Hello World'

The rest parameter additionalWords allows the function to accept any number of arguments beyond the first one:

combineStrings('T', 'e', 's', 't', '!'); // Returns: 'Test!'

While the function works as intended, it lacks type safety. For example, you wouldn't want someone to mistakenly call the function with numbers:

combineStrings(1, 2, 3); // This would cause a runtime error.

This is where TypeScript steps in. By adding type annotations, you can enforce that all arguments after the first one are strings:

function combineStrings(firstWord: string, ...additionalWords: string[]) {
  // Function implementation remains the same
}

With this annotation, TypeScript ensures that additionalWords is treated as an array of strings. So, if someone tries to call the function with numbers:

combineStrings(1, 2, 3); // TypeScript error: Argument of type 'number' is not assignable to parameter of type 'string'.

Key Takeaways

Rest Parameters: Rest parameters allow functions to accept any number of arguments. In TypeScript, rest parameters can be typed just like arrays.
Type Safety: By typing rest parameters, you prevent unintended usage and runtime errors.
Practical Use: Rest parameters are useful when you need to handle multiple arguments dynamically, but always ensure proper typing for safer code. Now, try implementing your own function with a typed rest parameter!

Arrays and Spread Syntax

In TypeScript, tuples work seamlessly with JavaScript's spread syntax, which is especially handy when dealing with functions that take multiple arguments. Consider the following function:

function gpsNavigate(
  startLatDeg: number, startLatMin: number, startDirectionLat: string,
  startLongDeg: number, startLongMin: number, startDirectionLong: string,
  endLatDeg: number, endLatMin: number, endDirectionLat: string,
  endLongDeg: number, endLongMin: number, endDirectionLong: string
) {
  // Navigation logic here
}

Suppose you call this function to navigate from New York City (40 degrees 43.2 minutes north, 73 degrees 59.8 minutes west) to a point in the Bermuda Triangle:

gpsNavigate(40, 43.2, 'N', 73, 59.8, 'W', 25, 0, 'N', 71, 0, 'W');

This call is lengthy and hard to follow. To simplify it, you can group the starting and ending coordinates into tuples:

let nycCoordinates: [number, number, string, number, number, string] = [40, 43.2, 'N', 73, 59.8, 'W'];
let bermudaCoordinates: [number, number, string, number, number, string] = [25, 0, 'N', 71, 0, 'W'];

Here, the tuple annotations ensure that each element is of the correct type for gpsNavigate().

Now, by using JavaScript's spread syntax, you can make your function call far more readable:

gpsNavigate(...nycCoordinates, ...bermudaCoordinates);

And, if you need to calculate the return trip, you can easily reverse the order:

gpsNavigate(...bermudaCoordinates, ...nycCoordinates);

This approach not only cleans up your code but also reduces the chances of mistakes when handling multiple arguments.

Functions

Custom Types