How to convert the following TypeScript logic into a function?

Question

So, I initially wanted to do the following conversion:

import { ComponentType } from 'react';
import { Component1, Component2 } from './components';

const components = {
  foo: Component1,
  bar: Component2,
};

// Into

const componentLookup = {
  foo: {
    name: 'foo',
    component: Component1
  },
  bar: {
    name: 'bar',
    component: Component2
  },
};

So, I created the following TS logic:

const components = {
  foo: Component1,
  bar: Component2,
};

type ComponentName = keyof typeof components;
type ComponentLookup = {
  [key in ComponentName]: {
    name: ComponentName;
    component: ComponentType;
  };
};

let componentLookup: ComponentLookup = {} as ComponentLookup;
(Object.keys(components) as ComponentName[]).forEach((name) => {
  componentLookup[name] = { name: name, component: components[name] };
});

// Intellisense picks up keys
componentLookup.foo;
componentLookup.bar;

Finally, I decided I want to create a function createLookups to take the components object and perform the logic instead, however, intellisense is having trouble.

const createLookups = (components: {
  [name: string]: ComponentType;
}): {
  [key in keyof typeof components]: {
    name: keyof typeof components;
    component: ComponentType;
  };
} => {
  type ComponentName = keyof typeof components;
  type ComponentLookup = {
    [key in ComponentName]: {
      name: ComponentName;
      component: ComponentType;
    };
  };

  let componentLookup: ComponentLookup = {} as ComponentLookup;
  (Object.keys(components) as ComponentName[]).forEach((name) => {
    componentLookup[name] = { name: name, component: components[name] };
  });

  return componentLookup;
};

If createLookups is defined in the same file and I call createLookups(components), intellisense picks up on foo and bar; however, if createLookups is defined in another file, it does not pick up on the foo/bar keys readily.

Is this an issue with TypeScript or my editor (WebStorm)?

@youdateme "_You should probably move the types outside the function_": No, that would create a compiler error as the data value form which the types are derived is a parameter of the function, which doesn't exist outside the function. — jsejcksn, Mar 08 '22 at 04:55

score 0 · Accepted Answer · answered Mar 08 '22 at 05:29

If you solve this problem in a general way (map the entries (key-value pairs) of an object to arbitrary property names), then you can apply it to your specific need (mapping property names and Component values), using a combination of currying and generic parameter constraint:

TS Playground

import {type ComponentType} from 'react';

type MappedEntries<
  ObjectType extends Record<string, unknown>,
  KeyProp extends string,
  ValueProp extends string,
> = {
  [K in keyof ObjectType]: (
    Record<KeyProp, K>
    & Record<ValueProp, ObjectType[K]>
  );
};

function mapEntriesToKeysInObjects <
  ObjectType extends Record<string, unknown>,
  KeyProp extends string,
  ValueProp extends string,
>(obj: ObjectType, keyProp: KeyProp, valueProp: ValueProp): MappedEntries<ObjectType, KeyProp, ValueProp> {
  return (Object.keys(obj) as (keyof ObjectType)[]).reduce((mapped, key) => {
    mapped[key] = {
      [keyProp]: key,
      [valueProp]: obj[key],
    } as Record<KeyProp, keyof ObjectType> & Record<ValueProp, ObjectType[keyof ObjectType]>;
    return mapped;
  }, {} as MappedEntries<ObjectType, KeyProp, ValueProp>);
}

// Let's test it:

const mapped = mapEntriesToKeysInObjects({first: 1, last: 2}, 'name', 'component');
mapped.first.name; // "first"
mapped.first.component; // number
mapped.last.name; // "last"
mapped.last.component; // number

// Looks good

// Now apply it to your function:
const createLookups = <T extends Record<string, ComponentType>>(components: T) => {
  return mapEntriesToKeysInObjects(components, 'name', 'component');
};

Thanks so much! Lot more TS knowledge in your solution I need to familiarize myself with. Is there any specific issue with my solution? Since I am still confused why keys are only being picked up when the function is defined in the same file. — fihekil740, Mar 08 '22 at 15:21
@fihekil740 I can't speak to your experience — especially in regard to WebStorm as I don't have experience with it. The [TypeScript Playground](https://www.typescriptlang.org/play) is the de facto reproduction environment for type exploration, code problem diagnosis, demonstrating TS language features, examining compiler behavior, etc. I know for sure that [VS Code](https://code.visualstudio.com/) includes the exact same language server used by the TS playground. — jsejcksn, Mar 09 '22 at 01:27

How to convert the following TypeScript logic into a function?

1 Answers1