TypeScript 类型，仅接受 object 的密钥

Question

I don't know if this is really possible, but I have an existing object that maps string keys to React components.

I want to create a type to essentially make a parent component only accept keys of the icon mapping object as a prop:

export const icons: { readonly [key: string]: React.VFC } = Object.freeze({})

type IconProps = {
  name: // every key of `icons`
}

export const Icon: React.VFC = ({ name }) => {
  return icons[name]({})
}

Again, I don't know if this even is possible, but it'd be super awesome if it was.

Also, if you have suggestion for a different title to make it more searchable and descriptive of what I'm actually trying to accomplish, I'd love to update it.

Answer 1

In this case, you need to create an enum (IconName) to see the names of the icons and assign this to the key.

type IconName = 'homeIcon' | 'ballIcon';
type IconMap = {
    [key in IconName]?: React.VFC;
};


const icons: IconMap = {
  homeIcon: <ExampleComponent />,
  ballIcon: <ExampleComponent />
};

To see this type on the parent component you need to put the IconName type into the component Generics , like this:

type IconProps = {
  name: IconName
}

export const Icon: React.VFC<IconProps> = ({ name }) => {
  // on this return you need to return only the value.  
  return icons[name]; 
}