How to convert Map<string,boolean> to {key: string; value: boolean;}[]?

March 28, 2024

I’m using React with TypeScript support and on the user creation page, I have implemented the dynamic creation of permissions, following this peace of code.
The permissions used on the page are set by the following hook:

const [permissions, setPermissions] = useState<{ perm: string; isTrue: boolean; }[]>([]);

The interface IUser, however, has permissions specified as follows:

export interface IUser {
    permissions: Map<string, boolean>
}

How can I convert Map<string, boolean> type to { perm: string; isTrue: boolean; }[]?

I’ve tried using Map.prototype.forEach() and Map.prototype.entries(), but couldn’t figure out how to bring their results to the right type.

I also know that the reverse conversion can be done using the following trick, but not sure if it can be used the other way around.

>Solution :

You can use Array.from() with a custom map callback function parameter that destructures each Map item into its key (=perm) and value (=isTrue) and creates a new object from that.

export interface IUser {
  permissions: Map<string, boolean>;
}

declare const permissionsMap: Map<string, boolean>;

const permissionsArray = Array.from(permissionsMap, ([perm, isTrue]) => ({
  perm,
  isTrue,
}));
// const permissionsArray: { perm: string; isTrue: boolean; }[]

TypeScript Playground