Typescript Type for Dynamic Array.map Callback Function

Question

In my Angular 8.2/Typescript 3.4.3 app, I need to generate an array.map callback dynamically, but the TS linter is barking about that function. Here is an example snippet I contrived to illustrate:

export type Role = [string, number];
export type BaseRole = [string, number[]];

const roles: BaseRole[] = [
  [ 'hero', [100, 200, 300]],
  [ 'villain', [300, 600, 900]],
  [ 'minion', [20, 40, 60]]
];

function roleMapper(i: number): Function {
  return ([role, strengths]) => [role, strengths[i]];
}

function getRolesAtLevel (level): Role[] {
  return roles.map(roleMapper(level));      // <-- Linter warning occurs here
}

let myRoles = getRolesAtLevel(1);

Above I want to map an array of "BaseRoles" down to "Roles" based on user input. The linter complains about return roles.map(roleMapper(level)); (line 16) with the follow message:

Argument of type 'Function' is not assignable to parameter of type '(value: [string, number[]], index: number, array: [string, number[]][]) => [string, number]'.

I observe that the type '(value ... index ... array)' would be that of a map callback. The function I've provided is typed Function and supports that interface, so my questions are:

Must I be explicit about the interface of the function when using the Function type?
Is there another notation that I should have used to designate a "map" callback?

Thanks..

jcalz · Accepted Answer · 2019-12-10 17:22:17Z

1

Yes, you should probably be more explicit about types. Function is too wide of a type to be useful for your purposes, since the compiler has no idea anymore what will come out of it. I'd suggest you write roleMapper() as follows:

function roleMapper(i: number) {
  return ([role, strengths]: BaseRole): Role => [role, strengths[i]];
}

Here we are telling the compiler that the returned function takes a BaseRole and returns a Role. The compiler infers a return type equivalent to (br: BaseRole) => Role, which will then allow the rest of your code to function as you intend:

function getRolesAtLevel(level: number): Role[] {
  return roles.map(roleMapper(level));  // okay
}

Okay, hope that helps; good luck!

Link to code

answered Dec 10, 2019 at 17:22

jcalz

339k29 gold badges452 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gkl Over a year ago

Beautiful ... happy linter now. I was sooo close! hehe. So my take away on this for next time is to be more explicit at the function definition level when constructing them. It helps to see that construction here, declaring argument type and return type on the returned function. Thanks!

Collectives™ on Stack Overflow

Typescript Type for Dynamic Array.map Callback Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related