In TypeScript, an array of vectors is a collection of vectors, where each vector can represent an array of numbers or custom objects. This multi-dimensional array structure is handy in scenarios such as mathematical computations, graphics programming, or handling grouped data in a type-safe and organized manner.
This tutorial explains how to create an array of vectors, and perform operations like adding, removing, and iterating over its values.
1. Creating a Vector
TypeScript lets us define a type for vectors in different ways, such as:
- A tuple type for fixed-length vectors.
- A generic array type for flexible-length vectors.
- A custom type using an interface.
// A 3D vector with exactly 3 numbers
type Vector3D = [number, number, number];
// A vector with any number of elements
type Vector = number[];
// Custom Object for Vectors
interface VectorObject {
x: number;
y: number;
z: number;
}2. Creating an Array of Vectors
Once a vector type is defined, we can create an array of such vectors.
The following code creates an array of fixed-length vectors.
type Vector3D = [number, number, number];
const vectors: Vector3D[] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];The following code creates an array of flexible-length vectors.
type Vector = number[];
const flexibleVectors: Vector[] = [
[1, 2],
[3, 4, 5],
[6, 7, 8, 9],
];The following code creates an array of custom object vectors.
interface VectorObject {
x: number;
y: number;
z: number;
}
const objectVectors: VectorObject[] = [
{ x: 1, y: 2, z: 3 },
{ x: 4, y: 5, z: 6 },
{ x: 7, y: 8, z: 9 },
];3. Adding and Removing from Vectors
Manipulating arrays of vectors is straightforward with array methods.
3.1. Adding Vectors to Array
- Use push and unshift for simpler operations when adding to the start or end.
- Use splice when inserting into specific positions within the array.
- Use concat to create a new array instead of modifying the existing one.
// Declare an array of vectors
let vectors: number[][] = [[1, 2, 3], [4, 5, 6]];
// 1. Add a vector to the end of the array
vectors.push([7, 8, 9]);
console.log("After push:", vectors); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 2. Add a vector to the beginning of the array
vectors.unshift([0, 0, 0]);
console.log("After unshift:", vectors); // [[0, 0, 0], [1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 3. Add a vector at a specific index
vectors.splice(2, 0, [10, 11, 12]); // Insert at index 2
console.log("After splice:", vectors); // [[0, 0, 0], [1, 2, 3], [10, 11, 12], [4, 5, 6], [7, 8, 9]]
// 4. Combine the array with a new vector (creates a new array)
const newVectors = vectors.concat([[13, 14, 15]]);
console.log("After concat (new array):", newVectors); // [[0, 0, 0], ..., [13, 14, 15]]
console.log("Original array remains unchanged:", vectors);.The program output:
After push: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
After unshift: [[0, 0, 0], [1, 2, 3], [4, 5, 6], [7, 8, 9]]
After splice: [[0, 0, 0], [1, 2, 3], [10, 11, 12], [4, 5, 6], [7, 8, 9]]
After concat (new array): [[0, 0, 0], [1, 2, 3], [10, 11, 12], [4, 5, 6], [7, 8, 9], [13, 14, 15]]
Original array remains unchanged: [[0, 0, 0], [1, 2, 3], [10, 11, 12], [4, 5, 6], [7, 8, 9]]3.2. Removing Vectors to Array
- pop(): Removes the last vector in the array.
- shift(): Removes the first vector in the array.
- splice(): Removes a vector at a specified index or a range of vectors.
- filter(): Creates a new array excluding vectors that match a specified condition.
- slice(): Creates a new array by excluding vectors from a specified index range.
The following code demonstrates the usage of these methods.
// Define an array of vectors
let vectorArray: number[][] = [[0, 0, 0], [1, 2, 3], [4, 5, 6], [7, 8, 9]];
// Using pop() to remove the last vector
let removedLast = vectorArray.pop();
console.log("After pop:", vectorArray);
// Using shift() to remove the first vector
let removedFirst = vectorArray.shift();
console.log("After shift:", vectorArray);
// Using splice() to remove a vector at index 1
let removedAtIndex = vectorArray.splice(1, 1); // Removes the second vector
console.log("After splice:", vectorArray);
// Using filter() to exclude vectors where the sum of elements > 10
let filteredArray = vectorArray.filter(vector => vector.reduce((sum, num) => sum + num, 0) <= 10);
console.log("After filter (sum <= 10):", filteredArray);
// Using slice() to create a new array excluding the first two vectors
let slicedArray = vectorArray.slice(1); // Removes all vectors before index 1
console.log("After slice (new array):", slicedArray);The program output:
After pop: [[0, 0, 0], [1, 2, 3], [4, 5, 6]]
After shift: [[1, 2, 3], [4, 5, 6]]
After splice: [[1, 2, 3]]
After filter (sum <= 10): [[1, 2, 3]]
After slice (new array): []3.3. Iterate over Array of Vectors
- forEach(): Executes a provided function once for each vector in the array.
- map(): Creates a new array populated with the results of calling a provided function on every vector.
- filter(): Creates a new array containing all vectors that meet a specified condition.
- reduce(): Applies a function to accumulate values by iterating over the array.
- for…of: Loops through each vector in the array.
- for loop: Iterates over the array using an index-based approach.
The following code demonstrates the usage of these methods.
let vectorArray: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
// forEach
vectorArray.forEach((vector) => console.log("forEach:", vector));
// map
let doubledVectors = vectorArray.map((vector) => vector.map((num) => num * 2));
console.log("map:", doubledVectors);
// filter
let filteredVectors = vectorArray.filter((vector) => vector[0] > 3);
console.log("filter:", filteredVectors);
// reduce
let sumOfAllElements = vectorArray.reduce(
(acc, vector) => acc + vector.reduce((sum, num) => sum + num, 0),
0
);
console.log("reduce:", sumOfAllElements);
// for...of
for (let vector of vectorArray) {
console.log("for...of:", vector);
}
// for loop
for (let i = 0; i < vectorArray.length; i++) {
console.log("for loop:", vectorArray[i]);
}The program output:
forEach: [1, 2, 3], [4, 5, 6], [7, 8, 9]
map: [[2, 4, 6], [8, 10, 12], [14, 16, 18]]
filter: [[4, 5, 6], [7, 8, 9]]
reduce: 45
for...of: [1, 2, 3], [4, 5, 6], [7, 8, 9]
for loop: [1, 2, 3], [4, 5, 6], [7, 8, 9]4. An Example of Array of Vectors
Let’s calculate the magnitude of each vector in an array of 3D vectors using the formula:
type Vector3D = [number, number, number];
const vectors: Vector3D[] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
const magnitudes = vectors.map(([x, y, z]) => {
return Math.sqrt(x ** 2 + y ** 2 + z ** 2);
});
console.log(magnitudes); // Output: [3.741, 8.774, 13.928]That’s all for an array of vectors in typescript.
Happy Learning !!
Comments