Typescript Type - append string for each key in object

Question

Given the following object:

const testFunctions = {
   test: () => 'test',
   test2: ( yo: string ) => console.log('test2')
}

and this addCommands function that maps the same functions but appends the component name.

const addCommands = <N extends string, T extends Record<string, any>>(name: N, myFunctions: Readonly<T>) => {
   const commands = {};
   
   Object.keys(myFunctions).forEach((key) => {
      const name = `${name}_${key}`;
      commands[name] = myFunctions[key];
   }

   // Cypress.Commands.addAll(commands); // ignore this
   return commands
}

when I call the addCommands function:

const mappedCommands = addCommands('testing', testFunctions );

the returned type should be of type:

/*
{
   testing_test: () => string;
   testing_test2: (yo: string) => void
}
*/

Any ideas?

Does this approach meet your needs? Note I had to fix some errors in your implementation to get it to work, and I didn't bother trying to get type safety in the function implementation (I just use any inside the function so there are no compiler errors)... but the return value and type are what you want. If that fully addresses the question I can write up an answer explaining; if not, what am I missing? (Pls mention @jcalz in your reply to notify me) — jcalz
– jcalz, Commented Nov 2, 2022 at 16:45
Hi, yes this works. I had been close but I didn't know about the in string I had errors to do with key not being a string. Thank you — Ewan
– Ewan, Commented Nov 2, 2022 at 17:09

jcalz · Accepted Answer · 2022-11-02 17:41:16Z

In what follows I'm only concerned with the call signature of addCommands(), not its implementation. That call signature should look like:

declare const addCommands: <N extends string, T extends Record<string, any>>(
  name: N, myFunctions: T
) => { [K in (string & keyof T) as `${N}_${K}`]: T[K]; }

This is using key remapping in mapped types via as to convert each string-valued key K in the keys of T to a version prepended with the type of name and an underscore. Since name is of type N, the new key type is the template literal type `${N}_${K}`.

Note that if you just write {[K in keyof T as `${N}_${K}`]: T[K]} you get an error that K can't appear in a template literal type. That's because, in general, the keys you get from the keyof operator are some subtype of PropertyKey, and these include symbol-valued keys, which TypeScript doesn't want to let you serialize (after all, an actual template literal value would produce a runtime error if you tried to do that).

To prevent that error we can restrict the keys over which K ranges. One way is to intersect keyof T with string, like (string & keyof T), to get just the string-valued keys. You could write ((string | number) & keyof T) if you want to support number keys (so that {0: ""} gets mapped to {test_0} instead of {}). Or Exclude<keyof T, symbol> using the Exclude<T, U> utility type, et cetera. The point is to convince the compiler that you're not going to try to serialize any symbols.

Let's test it:

const testFunctions = {
  test: () => 'test',
  test2: (yo: string) => console.log('test2')
}

const mappedCommands = addCommands('testing', testFunctions);
/* const mappedCommands: {
    testing_test: () => string;
    testing_test2: (yo: string) => void;
} */

Looks good, that's the type you wanted.

Playground link to code

Collectives™ on Stack Overflow

Typescript Type - append string for each key in object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related