Can you explain the correct method for assigning types when destructuring the `callbackFn.currentValue` in conjunction with the `.reduce()` method? Thank you

Question

Can you explain the correct method for assigning types when destructuring the `callbackFn.currentValue` in conjunction with the `.reduce()` method? Thank you

I'm working with an array of arrays, for example:

const input = [['A', 'X'], ['B', 'Y'],...];

In addition to that, I have two enums:

  enum MyMove {
    Rock = 'X',
    Paper = 'Y',
    Scissors = 'Z',
  };

  enum OpponentMove {
    Rock = 'A',
    Paper = 'B',
    Scissors = 'C',
  };

I am trying to use Array.prototype.reduce() on my input array, but I'm struggling with annotating the callbackFn.currentValue. This is what I have so far:

  const score: number = input.reduce(
    (acc: number, ([opponentMove, myMove]: [OpponentMove, MyMove])) => {

(referenced from Types when destructuring arrays), but I keep getting these errors:

02/index.ts:38:9 - error TS2322: Type 'string[]' is not assignable to type 'number'.

38   const score: number = input.reduce(
           ~~~~~
02/index.ts:39:21 - error TS2304: Cannot find name 'opponentMove'.

39     (acc: number, ([opponentMove, myMove]: [OpponentMove, MyMove])) => {
                       ~~~~~~~~~~~~
02/index.ts:39:35 - error TS2304: Cannot find name 'myMove'.

39     (acc: number, ([opponentMove, myMove]: [OpponentMove, MyMove])) => {
                                     ~~~~~~
02/index.ts:39:44 - error TS2554: Expected 1-2 arguments, but got 3.

39     (acc: number, ([opponentMove, myMove]: [OpponentMove, MyMove])) => {
                                              ~~~~~~~~~~~~~~~~~~~~~~

What is the correct way to annotate [opponentMove, myMove] in this case?

typescript annotations destructuring

Answer 1

Answer №1

Instead of specifying the types for callback parameters in your destructuring assignment, it is recommended to properly declare the type of the input variable from the beginning. For example:

const input: Array<[OpponentMove, MyMove]> = [
  [OpponentMove.Rock, MyMove.Rock],
  [OpponentMove.Paper, MyMove.Paper]
];

Consequently, the callback parameters destructured when using reduce() will be inferred based on context:

const score: number = input.reduce((
  acc, [opponentMove, myMove]) => 2, 0);
// (parameter) opponentMove: OpponentMove
// (parameter) myMove: MyMove

This results in the desired outcome.

Please note that I adjusted the initialization of input compared to your original version to prevent issues:

const input: Array<[OpponentMove, MyMove]> = 
  [['A', 'X'], ['B', 'Y']]; // error!

When working with an enum, it's important to refer to values using the enum itself. While MyMove.Rock and "X" may have the same value at runtime, TypeScript treats MyMove.Rock as a distinct version of "X" and raises errors if you use the latter incorrectly:

const oops: MyMove = "X"; // error! Type '"X"' is not assignable to type 'MyMove'.
const okay: MyMove = MyMove.Rock; // okay

Although you could utilize a type assertion to "cast" one type to another, it is risky:

const assert = "X" as MyMove; // okay
const whaa = "x" as MyMove; // compiler accepts this but it's a mistake

Therefore, following the proper approach is key:

const input: Array<[OpponentMove, MyMove]> = [
  [OpponentMove.Rock, MyMove.Rock],
  [OpponentMove.Paper, MyMove.Paper]
];

This aligns with the intended behavior of enums. If not satisfied, consider utilizing plain objects and literal types as they offer similar functionality:

const MyMove = {
  Rock: 'X',
  Paper: 'Y',
  Scissors: 'Z',
} as const;
type MyMove = typeof MyMove[keyof typeof MyMove];
// type MyMove = "X" | "Y" | "Z"

const OpponentMove = {
  Rock: 'A',
  Paper: 'B',
  Scissors: 'C',
} as const;
type OpponentMove = typeof OpponentMove[keyof typeof OpponentMove];
// type OpponentMove = "A" | "B" | "C"

With this setup, either way of referencing the values will function correctly since the type of MyMove.Rock is simply the literal type "X" without any enum-specific subtype considerations:

const input: Array<[OpponentMove, MyMove]> = [
  ["A", "X"], ["B", "Y"]
]; // okay

const input: Array<[OpponentMove, MyMove]> = [
  [OpponentMove.Rock, MyMove.Rock],
  [OpponentMove.Paper, MyMove.Paper]
]; // still acceptable

Link to code playground

Answer 2

Instead of specifying the types for callback parameters in your destructuring assignment, it is recommended to properly declare the type of the input variable from the beginning. For example:

const input: Array<[OpponentMove, MyMove]> = [
  [OpponentMove.Rock, MyMove.Rock],
  [OpponentMove.Paper, MyMove.Paper]
];

Consequently, the callback parameters destructured when using reduce() will be inferred based on context:

const score: number = input.reduce((
  acc, [opponentMove, myMove]) => 2, 0);
// (parameter) opponentMove: OpponentMove
// (parameter) myMove: MyMove

This results in the desired outcome.

Please note that I adjusted the initialization of input compared to your original version to prevent issues:

const input: Array<[OpponentMove, MyMove]> = 
  [['A', 'X'], ['B', 'Y']]; // error!

When working with an enum, it's important to refer to values using the enum itself. While MyMove.Rock and "X" may have the same value at runtime, TypeScript treats MyMove.Rock as a distinct version of "X" and raises errors if you use the latter incorrectly:

const oops: MyMove = "X"; // error! Type '"X"' is not assignable to type 'MyMove'.
const okay: MyMove = MyMove.Rock; // okay

Although you could utilize a type assertion to "cast" one type to another, it is risky:

const assert = "X" as MyMove; // okay
const whaa = "x" as MyMove; // compiler accepts this but it's a mistake

Therefore, following the proper approach is key:

const input: Array<[OpponentMove, MyMove]> = [
  [OpponentMove.Rock, MyMove.Rock],
  [OpponentMove.Paper, MyMove.Paper]
];

This aligns with the intended behavior of enums. If not satisfied, consider utilizing plain objects and literal types as they offer similar functionality:

const MyMove = {
  Rock: 'X',
  Paper: 'Y',
  Scissors: 'Z',
} as const;
type MyMove = typeof MyMove[keyof typeof MyMove];
// type MyMove = "X" | "Y" | "Z"

const OpponentMove = {
  Rock: 'A',
  Paper: 'B',
  Scissors: 'C',
} as const;
type OpponentMove = typeof OpponentMove[keyof typeof OpponentMove];
// type OpponentMove = "A" | "B" | "C"

With this setup, either way of referencing the values will function correctly since the type of MyMove.Rock is simply the literal type "X" without any enum-specific subtype considerations:

const input: Array<[OpponentMove, MyMove]> = [
  ["A", "X"], ["B", "Y"]
]; // okay

const input: Array<[OpponentMove, MyMove]> = [
  [OpponentMove.Rock, MyMove.Rock],
  [OpponentMove.Paper, MyMove.Paper]
]; // still acceptable

Link to code playground

Can you explain the correct method for assigning types when destructuring the `callbackFn.currentValue` in conjunction with the `.reduce()` method? Thank you

Answer №1

Similar questions

How to Utilize an Array from Observable Object in Angular 2 with ngFor and Async Pipe

Tips for incorporating a mail button to share html content within an Angular framework

Create a function that retrieves the value associated with a specific path within an object

Tips for dynamically incorporating filtered selections into a Mat-Select dropdown

When using Angular, the Zone can be accessed through VSCode intelligence, but it appears as undefined when running in

What is the best way to retrieve a {collection object} from a JavaScript map?

Using Typescript for AngularJS bindings with ng.IComponentController

What sets apart exporting a component from importing its module in another module?

Creating Meta tags for Dynamic Routes in a Nuxt 3 Build

The Typescript error message states that the type '{ onClick: () => void; }' cannot be assigned to the type 'IntrinsicAttributes'

Uh-oh! There seems to be an issue with the response. It appears that the

Exploring the power of TypeScript for authenticating sessions with NextJS

When trying to style a Material UI component in Mui v5, no matches for overloads were found

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

Issue encountered when attempting to save items in the browser's local storage

"Encountering an issue with mounting components in React Unit Testing with Jest and Typescript

What is the importance of moving prop types into a type or interface in React components?

Exploring the functionality of two-way data binding in Angular - a beginner's guide

Angular2: Promise Rejection: Quotes cannot be used for evaluation in this component

What steps can be taken when encountering TS errors regarding missing required fields that are in the process of being filled?