@vpmedia/phaser 1.103.0 → 1.105.0

package/src/phaser/geom/util/point.ts

@@ -7,7 +7,7 @@ import { Point } from '../point.js';
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point containing the sum of the two points.
  */
-export const add = (a, b, output = null) => {
+export const add = (a: Point, b: Point, output: Point = null) => {
   const result = output || new Point();
   result.x = a.x + b.x;
   result.y = a.y + b.y;
@@ -21,7 +21,7 @@ export const add = (a, b, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point containing the difference of the two points.
  */
-export const subtract = (a, b, output = null) => {
+export const subtract = (a: Point, b: Point, output: Point = null) => {
   const result = output || new Point();
   result.x = a.x - b.x;
   result.y = a.y - b.y;
@@ -35,7 +35,7 @@ export const subtract = (a, b, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point containing the product of the two points.
  */
-export const multiply = (a, b, output = null) => {
+export const multiply = (a: Point, b: Point, output: Point = null) => {
   const result = output || new Point();
   result.x = a.x * b.x;
   result.y = a.y * b.y;
@@ -49,7 +49,7 @@ export const multiply = (a, b, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point containing the quotient of the two points.
  */
-export const divide = (a, b, output = null) => {
+export const divide = (a: Point, b: Point, output: Point = null) => {
   const result = output || new Point();
   result.x = a.x / b.x;
   result.y = a.y / b.y;
@@ -62,7 +62,7 @@ export const divide = (a, b, output = null) => {
  * @param {Point} b - The second point to compare.
  * @returns {boolean} True if the points are equal, false otherwise.
  */
-export const equals = (a, b) => {
+export const equals = (a: Point, b: Point) => {
   return a.x === b.x && a.y === b.y;
 };
 
@@ -72,7 +72,7 @@ export const equals = (a, b) => {
  * @param {Point} b - The second point to calculate the angle to.
  * @returns {number} The angle between the two points in radians.
  */
-export const angle = (a, b) => {
+export const angle = (a: Point, b: Point) => {
   return Math.atan2(a.y - b.y, a.x - b.x);
 };
 
@@ -82,7 +82,7 @@ export const angle = (a, b) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point with negated coordinates.
  */
-export const negative = (a, output = null) => {
+export const negative = (a: Point, output: Point = null) => {
   const result = output || new Point();
   return result.setTo(-a.x, -a.y);
 };
@@ -95,7 +95,7 @@ export const negative = (a, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point with the result of the operation.
  */
-export const multiplyAdd = (a, b, s, output = null) => {
+export const multiplyAdd = (a: Point, b: Point, s: number, output: Point = null) => {
   const result = output || new Point();
   return result.setTo(a.x + b.x * s, a.y + b.y * s);
 };
@@ -108,7 +108,7 @@ export const multiplyAdd = (a, b, s, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point interpolated between the two points.
  */
-export const interpolate = (a, b, f, output = null) => {
+export const interpolate = (a: Point, b: Point, f: number, output: Point = null) => {
   const result = output || new Point();
   return result.setTo(a.x + (b.x - a.x) * f, a.y + (b.y - a.y) * f);
 };
@@ -119,7 +119,7 @@ export const interpolate = (a, b, f, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point that is perpendicular to the input point.
  */
-export const perp = (a, output = null) => {
+export const perp = (a: Point, output: Point = null) => {
   const result = output || new Point();
   return result.setTo(-a.y, a.x);
 };
@@ -130,7 +130,7 @@ export const perp = (a, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point that is perpendicular to the input point (rotated clockwise).
  */
-export const rperp = (a, output = null) => {
+export const rperp = (a: Point, output: Point = null) => {
   const result = output || new Point();
   return result.setTo(a.y, -a.x);
 };
@@ -142,7 +142,7 @@ export const rperp = (a, output = null) => {
  * @param {boolean} round - Whether to round the result (default: false).
  * @returns {number} The distance between the two points.
  */
-export const distance = (a, b, round = false) => {
+export const distance = (a: Point, b: Point, round: boolean = false) => {
   const dx = a.x - b.x;
   const dy = a.y - b.y;
   const abDistance = Math.sqrt(dx * dx + dy * dy);
@@ -156,7 +156,7 @@ export const distance = (a, b, round = false) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point with the projected result.
  */
-export const project = (a, b, output = null) => {
+export const project = (a: Point, b: Point, output: Point = null) => {
   const result = output || new Point();
   const amt = a.dot(b) / b.getMagnitudeSq();
   if (amt !== 0) {
@@ -172,7 +172,7 @@ export const project = (a, b, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point with the projected result.
  */
-export const projectUnit = (a, b, output = null) => {
+export const projectUnit = (a: Point, b: Point, output: Point = null) => {
   const result = output || new Point();
   const amt = a.dot(b);
   if (amt !== 0) {
@@ -187,7 +187,7 @@ export const projectUnit = (a, b, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point with the same x coordinate but negated y coordinate.
  */
-export const normalRightHand = (a, output = null) => {
+export const normalRightHand = (a: Point, output: Point = null) => {
   const result = output || new Point();
   return result.setTo(a.y * -1, a.x);
 };
@@ -198,7 +198,7 @@ export const normalRightHand = (a, output = null) => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new normalized point.
  */
-export const normalize = (a, output = null) => {
+export const normalize = (a: Point, output: Point = null) => {
   const result = output || new Point();
   const m = a.getMagnitude();
   if (m !== 0) {
@@ -217,7 +217,7 @@ export const normalize = (a, output = null) => {
  * @param {number | null | undefined} dist - The distance to rotate from (default: null).
  * @returns {Point} The rotated point instance for chaining.
  */
-export const rotate = (a, x, y, ang, asDegrees, dist) => {
+export const rotate = (a: Point, x: number, y: number, ang: number, asDegrees: boolean, dist: number | null | undefined) => {
   if (asDegrees) {
     ang *= Math.PI / 180;
   }
@@ -244,7 +244,7 @@ export const rotate = (a, x, y, ang, asDegrees, dist) => {
  * @returns {Point} A new point representing the centroid of the input points.
  * @throws {Error} If the points array is empty.
  */
-export const centroid = (points, output = null) => {
+export const centroid = (points: Point[], output: Point = null) => {
   const result = output || new Point();
   const pointsLen = points.length;
   if (pointsLen < 1) {
@@ -268,7 +268,7 @@ export const centroid = (points, output = null) => {
  * @param {string} yProp - The name of the property containing the y value (default: 'y').
  * @returns {Point} A new point with parsed x and y values.
  */
-export const parse = (obj, xProp = 'x', yProp = 'y') => {
+export const parse = (obj: any, xProp: string = 'x', yProp: string = 'y') => {
   const point = new Point();
   if (obj[xProp]) {
     point.x = Number.parseInt(obj[xProp], 10);
@@ -285,7 +285,7 @@ export const parse = (obj, xProp = 'x', yProp = 'y') => {
  * @param {Point} output - The point to store the result in (optional).
  * @returns {Point} A new point with the same coordinates as the input.
  */
-export const clone = (input, output = null) => {
+export const clone = (input: Point, output: Point = null) => {
   const result = output || new Point();
   result.setTo(input.x, input.y);
   return result;

package/src/phaser/geom/util/polygon.ts

@@ -6,7 +6,7 @@ import { Polygon } from '../polygon.js';
  * @param {Polygon} output - Optional polygon to store the result in.
  * @returns {Polygon} The cloned polygon.
  */
-export const clone = (input, output = null) => {
+export const clone = (input: Polygon, output: Polygon = null) => {
   const result = output || new Polygon();
   result.setTo(input._points.slice());
   return result;

package/src/phaser/geom/util/rectangle.ts

@@ -8,7 +8,7 @@ import { Rectangle } from '../rectangle.js';
  * @param {number} dy - The amount to inflate the rectangle vertically.
  * @returns {Rectangle} The inflated rectangle.
  */
-export const inflate = (a, dx, dy) => {
+export const inflate = (a: Rectangle, dx: number, dy: number) => {
   a.x -= dx;
   a.width += 2 * dx;
   a.y -= dy;
@@ -22,7 +22,7 @@ export const inflate = (a, dx, dy) => {
  * @param {object} point - The point containing x and y values to inflate the rectangle by.
  * @returns {Rectangle} The inflated rectangle.
  */
-export const inflatePoint = (a, point) => {
+export const inflatePoint = (a: Rectangle, point: any) => {
   return inflate(a, point.x, point.y);
 };
 
@@ -32,7 +32,7 @@ export const inflatePoint = (a, point) => {
  * @param {Point} output - Optional point to store the result in.
  * @returns {Point} The size of the rectangle as a point (width, height).
  */
-export const size = (a, output = null) => {
+export const size = (a: Rectangle, output: Point = null) => {
   const result = output || new Point();
   result.setTo(a.width, a.height);
   return result;
@@ -44,7 +44,7 @@ export const size = (a, output = null) => {
  * @param {Rectangle} output - Optional rectangle to store the result in.
  * @returns {Rectangle} The cloned rectangle.
  */
-export const clone = (input, output = null) => {
+export const clone = (input: Rectangle, output: Rectangle = null) => {
   const result = output || new Rectangle();
   result.setTo(input.x, input.y, input.width, input.height);
   return result;
@@ -57,7 +57,7 @@ export const clone = (input, output = null) => {
  * @param {number} y - The y coordinate of the point.
  * @returns {boolean} True if the point is contained within the rectangle, false otherwise.
  */
-export const contains = (a, x, y) => {
+export const contains = (a: Rectangle, x: number, y: number) => {
   if (a.width <= 0 || a.height <= 0) {
     return false;
   }
@@ -74,7 +74,7 @@ export const contains = (a, x, y) => {
  * @param {number} y - The y coordinate of the point.
  * @returns {boolean} True if the point is contained within the rectangle, false otherwise.
  */
-export const containsRaw = (rx, ry, rw, rh, x, y) => {
+export const containsRaw = (rx: number, ry: number, rw: number, rh: number, x: number, y: number) => {
   return x >= rx && x < rx + rw && y >= ry && y < ry + rh;
 };
 
@@ -84,7 +84,7 @@ export const containsRaw = (rx, ry, rw, rh, x, y) => {
  * @param {Point} point - The point to check.
  * @returns {boolean} True if the point is contained within the rectangle, false otherwise.
  */
-export const containsPoint = (a, point) => {
+export const containsPoint = (a: Rectangle, point: Point) => {
   return contains(a, point.x, point.y);
 };
 
@@ -94,7 +94,7 @@ export const containsPoint = (a, point) => {
  * @param {Rectangle} b - The second rectangle to check.
  * @returns {boolean} True if rectangle a contains rectangle b, false otherwise.
  */
-export const containsRect = (a, b) => {
+export const containsRect = (a: Rectangle, b: Rectangle) => {
   if (a.volume > b.volume) {
     return false;
   }
@@ -107,7 +107,7 @@ export const containsRect = (a, b) => {
  * @param {Rectangle} b - The second rectangle to compare.
  * @returns {boolean} True if the rectangles are equal, false otherwise.
  */
-export const equals = (a, b) => {
+export const equals = (a: Rectangle, b: Rectangle) => {
   return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 };
 
@@ -117,7 +117,7 @@ export const equals = (a, b) => {
  * @param {Rectangle} b - The second rectangle to compare.
  * @returns {boolean} True if the rectangles have the same dimensions, false otherwise.
  */
-export const sameDimensions = (a, b) => {
+export const sameDimensions = (a: Rectangle, b: Rectangle) => {
   return a.width === b.width && a.height === b.height;
 };
 
@@ -127,7 +127,7 @@ export const sameDimensions = (a, b) => {
  * @param {Rectangle} b - The second rectangle to check.
  * @returns {boolean} True if the rectangles intersect, false otherwise.
  */
-export const intersects = (a, b) => {
+export const intersects = (a: Rectangle, b: Rectangle) => {
   if (a.width <= 0 || a.height <= 0 || b.width <= 0 || b.height <= 0) {
     return false;
   }
@@ -141,7 +141,7 @@ export const intersects = (a, b) => {
  * @param {Rectangle} output - Optional rectangle to store the result in.
  * @returns {Rectangle} The intersection of the rectangles, or an empty rectangle if they don't intersect.
  */
-export const intersection = (a, b, output = null) => {
+export const intersection = (a: Rectangle, b: Rectangle, output: Rectangle = null) => {
   const result = output || new Rectangle();
   if (intersects(a, b)) {
     result.x = Math.max(a.x, b.x);
@@ -162,7 +162,7 @@ export const intersection = (a, b, output = null) => {
  * @param {number} tolerance - Optional tolerance value for intersection.
  * @returns {boolean} True if the rectangle intersects with the area, false otherwise.
  */
-export const intersectsRaw = (a, left, right, top, bottom, tolerance = 0) => {
+export const intersectsRaw = (a: Rectangle, left: number, right: number, top: number, bottom: number, tolerance: number = 0) => {
   return !(
     left > a.right + tolerance ||
     right < a.left - tolerance ||
@@ -178,7 +178,7 @@ export const intersectsRaw = (a, left, right, top, bottom, tolerance = 0) => {
  * @param {Rectangle} output - Optional rectangle to store the result in.
  * @returns {Rectangle} The union of the rectangles.
  */
-export const union = (a, b, output = null) => {
+export const union = (a: Rectangle, b: Rectangle, output: Rectangle = null) => {
   const result = output || new Rectangle();
   return result.setTo(
     Math.min(a.x, b.x),
@@ -194,7 +194,7 @@ export const union = (a, b, output = null) => {
  * @param {Rectangle} output - Optional rectangle to store the result in.
  * @returns {Rectangle} The AABB of the points.
  */
-export const aabb = (points, output = null) => {
+export const aabb = (points: Point[], output: Rectangle = null) => {
   const result = output || new Rectangle();
   let xMax = Number.NEGATIVE_INFINITY;
   let xMin = Number.POSITIVE_INFINITY;

package/src/phaser/geom/util/rounded_rectangle.ts

@@ -6,7 +6,7 @@ import { RoundedRectangle } from '../rounded_rectangle.js';
  * @param {RoundedRectangle} output - Optional rounded rectangle to store the result in.
  * @returns {RoundedRectangle} The cloned rounded rectangle.
  */
-export const clone = (input, output = null) => {
+export const clone = (input: RoundedRectangle, output: RoundedRectangle = null) => {
   const result = output || new RoundedRectangle();
   result.x = input.x;
   result.y = input.y;

package/src/phaser/util/math.ts

@@ -2,31 +2,39 @@ export const DEG_TO_RAD = Math.PI / 180;
 export const RAD_TO_DEG = 180 / Math.PI;
 export const PI_2 = Math.PI * 2;
 
-/**
- * Converts a hexadecimal color value to RGB components.
- * @param {number} hex - The hexadecimal color value.
- * @returns {number[]} An array containing the RGB components [r, g, b].
- */
-export const hex2rgb = (hex) => {
+export interface ColorTarget {
+  r?: number;
+  g?: number;
+  b?: number;
+  a?: number;
+  rgba?: string;
+  color?: number;
+  color32?: number;
+}
+
+export interface ColorComponents {
+  alpha: number;
+  red: number;
+  green: number;
+  blue: number;
+  a: number;
+  r: number;
+  g: number;
+  b: number;
+}
+
+/** Converts a hexadecimal color value to RGB components. */
+export const hex2rgb = (hex: number): [number, number, number] => {
   return [((hex >> 16) & 0xff) / 255, ((hex >> 8) & 0xff) / 255, (hex & 0xff) / 255];
 };
 
-/**
- * Converts RGB components to a hexadecimal color value.
- * @param {number} rgb - The RGB components array [r, g, b].
- * @returns {number} The hexadecimal color value.
- */
-export const rgb2hex = (rgb) => {
+/** Converts RGB components to a hexadecimal color value. */
+export const rgb2hex = (rgb: number[]): number => {
   return ((rgb[0] * 255) << 16) + ((rgb[1] * 255) << 8) + rgb[2] * 255;
 };
 
-/**
- * Gets the next power of two greater than or equal to a value.
- * @param {number} value - The input value.
- * @returns {number} The next power of two.
- */
-export const getNextPowerOfTwo = (value) => {
-  // see: https://en.wikipedia.org/wiki/Power_of_two#Fast_algorithm_to_check_if_a_positive_number_is_a_power_of_two
+/** Gets the next power of two greater than or equal to a value. */
+export const getNextPowerOfTwo = (value: number): number => {
   if (value > 0 && (value & (value - 1)) === 0) {
     return value;
   }
@@ -37,52 +45,28 @@ export const getNextPowerOfTwo = (value) => {
   return result;
 };
 
-/**
- * Checks if both width and height are powers of two.
- * @param {number} width - The width to check.
- * @param {number} height - The height to check.
- * @returns {boolean} True if both width and height are powers of two, false otherwise.
- */
-export const isPowerOfTwo = (width, height) => {
+/** Checks if both width and height are powers of two. */
+export const isPowerOfTwo = (width: number, height: number): boolean => {
   return width > 0 && (width & (width - 1)) === 0 && height > 0 && (height & (height - 1)) === 0;
 };
 
-/**
- * Converts degrees to radians.
- * @param {number} degrees - The angle in degrees.
- * @returns {number} The angle in radians.
- */
-export const degToRad = (degrees) => {
+/** Converts degrees to radians. */
+export const degToRad = (degrees: number): number => {
   return degrees * DEG_TO_RAD;
 };
 
-/**
- * Converts radians to degrees.
- * @param {number} radians - The angle in radians.
- * @returns {number} The angle in degrees.
- */
-export const radToDeg = (radians) => {
+/** Converts radians to degrees. */
+export const radToDeg = (radians: number): number => {
   return radians * RAD_TO_DEG;
 };
 
-/**
- * Gets a random integer between min and max (inclusive).
- * @param {number} min - The minimum value.
- * @param {number} max - The maximum value.
- * @returns {number} A random integer between min and max.
- */
-export const between = (min, max) => {
+/** Gets a random integer between min and max (inclusive). */
+export const between = (min: number, max: number): number => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
 
-/**
- * Snaps a value to the nearest multiple of gap, starting from start.
- * @param {number} input - The value to snap.
- * @param {number} gap - The gap size to snap to.
- * @param {number} start - The starting offset for snapping.
- * @returns {number} The snapped value.
- */
-export const snapToCeil = (input, gap = 0, start = 0) => {
+/** Snaps a value to the nearest multiple of gap, starting from start. */
+export const snapToCeil = (input: number, gap: number = 0, start: number = 0): number => {
   if (gap === 0) {
     return input;
   }
@@ -91,14 +75,8 @@ export const snapToCeil = (input, gap = 0, start = 0) => {
   return start + input;
 };
 
-/**
- * Wraps a value within a range.
- * @param {number} value - The value to wrap.
- * @param {number} min - The minimum value of the range.
- * @param {number} max - The maximum value of the range.
- * @returns {number} The wrapped value.
- */
-export const wrap = (value, min, max) => {
+/** Wraps a value within a range. */
+export const wrap = (value: number, min: number, max: number): number => {
   const range = max - min;
   if (range <= 0) {
     return 0;
@@ -110,34 +88,18 @@ export const wrap = (value, min, max) => {
   return result + min;
 };
 
-/**
- * Performs linear interpolation between two values.
- * @param {number} p0 - The first point.
- * @param {number} p1 - The second point.
- * @param {number} t - The interpolation factor (0 to 1).
- * @returns {number} The interpolated value.
- */
-export const linear = (p0, p1, t) => {
+/** Performs linear interpolation between two values. */
+export const linear = (p0: number, p1: number, t: number): number => {
   return (p1 - p0) * t + p0;
 };
 
-/**
- * Calculates the absolute difference between two numbers.
- * @param {number} a - The first number.
- * @param {number} b - The second number.
- * @returns {number} The absolute difference between a and b.
- */
-export const difference = (a, b) => {
+/** Calculates the absolute difference between two numbers. */
+export const difference = (a: number, b: number): number => {
   return Math.abs(a - b);
 };
 
-/**
- * Performs linear interpolation on an array of values.
- * @param {number[]} v - The array of values.
- * @param {number} k - The interpolation factor (0 to 1).
- * @returns {number} The interpolated value.
- */
-export const linearInterpolation = (v, k) => {
+/** Performs linear interpolation on an array of values. */
+export const linearInterpolation = (v: number[], k: number): number => {
   const m = v.length - 1;
   const f = m * k;
   const i = Math.floor(f);
@@ -150,62 +112,31 @@ export const linearInterpolation = (v, k) => {
   return linear(v[i], v[i + 1 > m ? m : i + 1], f - i);
 };
 
-/**
- * Calculates the distance between two points.
- * @param {number} x1 - The x-coordinate of the first point.
- * @param {number} y1 - The y-coordinate of the first point.
- * @param {number} x2 - The x-coordinate of the second point.
- * @param {number} y2 - The y-coordinate of the second point.
- * @returns {number} The distance between the two points.
- */
-export const distance = (x1, y1, x2, y2) => {
+/** Calculates the distance between two points. */
+export const distance = (x1: number, y1: number, x2: number, y2: number): number => {
   const dx = x1 - x2;
   const dy = y1 - y2;
   return Math.sqrt(dx * dx + dy * dy);
 };
 
-/**
- * Checks if two numbers are within a tolerance of each other.
- * @param {number} a - The first number.
- * @param {number} b - The second number.
- * @param {number} tolerance - The tolerance value.
- * @returns {boolean} True if the numbers are within tolerance, false otherwise.
- */
-export const within = (a, b, tolerance) => {
+/** Checks if two numbers are within a tolerance of each other. */
+export const within = (a: number, b: number, tolerance: number): boolean => {
   return Math.abs(a - b) <= tolerance;
 };
 
-/**
- * Creates a 32-bit color value from alpha, red, green, and blue components.
- * @param {number} a - The alpha component (0-255).
- * @param {number} r - The red component (0-255).
- * @param {number} g - The green component (0-255).
- * @param {number} b - The blue component (0-255).
- * @returns {number} The 32-bit color value.
- */
-export const getColor32 = (a, r, g, b) => {
+/** Creates a 32-bit color value from alpha, red, green, and blue components. */
+export const getColor32 = (a: number, r: number, g: number, b: number): number => {
   return (a << 24) | (r << 16) | (g << 8) | b;
 };
 
-/**
- * Creates a 24-bit color value from red, green, and blue components.
- * @param {number} r - The red component (0-255).
- * @param {number} g - The green component (0-255).
- * @param {number} b - The blue component (0-255).
- * @returns {number} The 24-bit color value.
- */
-export const getColor = (r, g, b) => {
+/** Creates a 24-bit color value from red, green, and blue components. */
+export const getColor = (r: number, g: number, b: number): number => {
   return (r << 16) | (g << 8) | b;
 };
 
-/**
- * Converts a hex color string to RGB components.
- * @param {string} value - The hex color string (e.g. "#FF0000").
- * @param {{r?: number, g?: number, b?: number}} out - The object to store the result in.
- */
-export const hexToColor = (value, out) => {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  value = value.replace(/^(?:#|0x)?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
+/** Converts a hex color string to RGB components. */
+export const hexToColor = (value: string, out: ColorTarget): void => {
+  value = value.replace(/^(?:#|0x)?([a-f\d])([a-f\d])([a-f\d])$/i, (_m, r, g, b) => r + r + g + g + b + b);
   const result = /^(?:#|0x)?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
   if (result) {
     out.r = Number.parseInt(result[1], 16);
@@ -214,12 +145,8 @@ export const hexToColor = (value, out) => {
   }
 };
 
-/**
- * Converts a web color string (e.g. "rgb(255, 0, 0)") to RGB components with alpha.
- * @param {string} value - The web color string (e.g. "rgba(255, 0, 0, 0.5)").
- * @param {{r?: number, g?: number, b?: number, a?: number}} out - The object to store the result in.
- */
-export const webToColor = (value, out) => {
+/** Converts a web color string (e.g. "rgb(255, 0, 0)") to RGB components with alpha. */
+export const webToColor = (value: string, out: ColorTarget): void => {
   const result = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+(?:\.\d+)?))?\s*\)$/.exec(value);
   if (result) {
     out.r = Number.parseInt(result[1], 10);
@@ -229,14 +156,9 @@ export const webToColor = (value, out) => {
   }
 };
 
-/**
- * Extracts RGB components from a 32-bit color value.
- * @param {number} color - The 32-bit color value.
- * @returns {{ alpha: number, red: number, green: number, blue: number, a: number, r: number, g: number, b: number}} An object containing the color components.
- */
-export const getRGB = (color) => {
+/** Extracts RGB components from a 32-bit color value. */
+export const getRGB = (color: number): ColorComponents => {
   if (color > 16777215) {
-    //  The color value has an alpha component
     return {
       alpha: color >>> 24,
       red: (color >> 16) & 0xff,
@@ -260,32 +182,24 @@ export const getRGB = (color) => {
   };
 };
 
-/**
- * Converts a color value (string or number) to an object with various color formats.
- * @param {string|number} value - The color value (e.g. "#FF0000" or 0xFF0000).
- * @param {{a?: number, r?: number, g?: number, b?: number, rgba?: string, color?: number, color32?: number}} out - The object to store the result in.
- * @returns {{a?: number, r?: number, g?: number, b?: number, rgba?: string, color?: number, color32?: number}} The updated out object.
- */
-export const valueToColor = (value, out) => {
+/** Converts a color value (string or number) to an object with various color formats. */
+export const valueToColor = (value: string | number, out: ColorTarget): ColorTarget => {
   if (typeof value === 'string') {
     if (value.indexOf('rgb') === 0) {
       webToColor(value, out);
     } else {
-      //  `hexToColor` does not support alpha; match `createColor`.
       out.a = 1;
       hexToColor(value, out);
     }
   } else if (typeof value === 'number') {
-    //  `getRGB` does not take optional object to modify;
-    //  alpha is also adjusted to match `createColor`.
     const tempColor = getRGB(value);
     out.r = tempColor.r;
     out.g = tempColor.g;
     out.b = tempColor.b;
     out.a = tempColor.a / 255;
   }
-  out.rgba = `rgba(${out.r.toString()},${out.g.toString()},${out.b.toString()},${out.a.toString()})`;
-  out.color = getColor(out.r, out.g, out.b);
-  out.color32 = getColor32(out.a * 255, out.r, out.g, out.b);
+  out.rgba = `rgba(${out.r!.toString()},${out.g!.toString()},${out.b!.toString()},${out.a!.toString()})`;
+  out.color = getColor(out.r!, out.g!, out.b!);
+  out.color32 = getColor32(out.a! * 255, out.r!, out.g!, out.b!);
   return out;
 };