Utilizing the spread operator in Typescript to combine multiple Maps into a fresh Map leads to an instance of a clear Object

Question

Utilizing the spread operator in Typescript to combine multiple Maps into a fresh Map leads to an instance of a clear Object

Check out the code below:

let m1 = new Map<string, PolicyDocument>([
        [
            "key1",
            new PolicyDocument({
                statements: [
                    new PolicyStatement({
                        actions: ["sqs:PublishMessage"],
                        effect: Effect.ALLOW,
                        resources: ["aa:bb:cc"]
                    })
                ]
            })
        ]
    ]);

    let m2 = new Map<string, PolicyDocument>([
        [
            "key2",
            new PolicyDocument({
                statements: [
                    new PolicyStatement({
                        actions: ["sqs:GetMessage"],
                        effect: Effect.ALLOW,
                        resources: ["aa:bb:cc"]
                    })
                ]
            })
        ]
    ]);

    let m3 = new Map<string, PolicyDocument>([
        [
            "key3",
            new PolicyDocument({
                statements: [
                    new PolicyStatement({
                        actions: ["sqs:DeleteMessage"],
                        effect: Effect.ALLOW,
                        resources: ["aa:bb:cc"]
                    })
                ]
            })
        ]
    ]);

    const result: Map<string, PolicyDocument> = {
        ...m1,
        ...m2,
        ...m3
    };
    console.log(result);

Could anyone explain why result is not populated with the three key-value pairs as expected? It seems like I am missing a fundamental TypeScript concept.

I made sure to use the built-in Map type and avoided importing anything external.

Edit

Appreciate the guidance on how to properly merge Maps. My concern lies in

why there are no compile-time errors in the provided code?
why the merging technique doesn't produce the desired output?

typescript

Answer 1

Answer №1

The method of merging you used is ineffective because spreading Maps does not duplicate anything

If we use object spread like {...m1, ...m2, ...m3}, it only duplicates the objects' own enumerable properties. This means that it copies only the properties directly belonging to the objects themselves, and not those inherited from their prototypes. Additionally, it only includes the enumerable properties of the objects, such as those generated through assignment or defined as public class fields, excluding non-enumerable properties like class methods or getters. When we examine a Map object using

Object.getOwnPropertyDescriptors()

and Object.getPrototypeOf(), we observe the following:

const map = new Map([["a", 1], ["b", 2]]);
console.log(map) // Map (2) {"a"=>1, "b"=>2}
displayProps(map);
/* 
get: inherited non-enumerable
has: inherited non-enumerable
set: inherited non-enumerable
delete: inherited non-enumerable
keys: inherited non-enumerable
values: inherited non-enumerable
clear: inherited non-enumerable
forEach: inherited non-enumerable
entries: inherited non-enumerable
size: inherited non-enumerable 
...
*/

As shown, there are no own enumerable properties in the Map object, thus spreading a Map object does not actually copy any properties:

const copy = {...map};
console.log(copy) // {}
displayProps(copy);
/*
toString: inherited non-enumerable
toLocaleString: inherited non-enumerable 
...
*/

This demonstrates why attempting to merge Maps using spread syntax fails during runtime.

TypeScript did not identify the error of assigning the result to Map due to its inability to differentiate between own/enumerable properties

Given that {...map} results in an empty object, why does TypeScript not raise an error when assigning it to a Map type?

const result: Map<string, number>
  = { ...map, ...map, ...map }; // no error

The issue lies in the fact that the current TypeScript type system lacks the capability to specify whether a property is own/inherited or enumerable/non-enumerable. There exists an ongoing request for this feature at microsoft/TypeScript#9726. Until such functionality becomes a part of TypeScript, the language remains unaware of whether a Map's properties are all own and enumerable. In theory, it would be possible to create an object that mimics a Map instance but with all own and enumerable properties, fooling TypeScript into considering it a valid operation:

// Example similar to a Map instance
const fakeMap: Map<string, number> = {
  get: () => 1, has: () => true, set: () => o,
  ...
}

const p: Map<string, number> = { ...fakeMap }
displayProps(p);
/* 
get: own enumerable
has: own enumerable
set: own enumerable
... 
*/

Due to the compiler's inability to distinguish these scenarios, spreading operations on Map instances appear acceptable to TypeScript.

For more details, refer to microsoft/TypeScript#33081, which addresses this specific issue of spreading Map instances and was closed as a duplicate of microsoft/TypeScript#9726.

In summary, copying Map instances through object spread is not feasible, and TypeScript does not detect this discrepancy.

Playground link to code

Answer 2

The method of merging you used is ineffective because spreading Maps does not duplicate anything

If we use object spread like {...m1, ...m2, ...m3}, it only duplicates the objects' own enumerable properties. This means that it copies only the properties directly belonging to the objects themselves, and not those inherited from their prototypes. Additionally, it only includes the enumerable properties of the objects, such as those generated through assignment or defined as public class fields, excluding non-enumerable properties like class methods or getters. When we examine a Map object using

Object.getOwnPropertyDescriptors()

and Object.getPrototypeOf(), we observe the following:

const map = new Map([["a", 1], ["b", 2]]);
console.log(map) // Map (2) {"a"=>1, "b"=>2}
displayProps(map);
/* 
get: inherited non-enumerable
has: inherited non-enumerable
set: inherited non-enumerable
delete: inherited non-enumerable
keys: inherited non-enumerable
values: inherited non-enumerable
clear: inherited non-enumerable
forEach: inherited non-enumerable
entries: inherited non-enumerable
size: inherited non-enumerable 
...
*/

As shown, there are no own enumerable properties in the Map object, thus spreading a Map object does not actually copy any properties:

const copy = {...map};
console.log(copy) // {}
displayProps(copy);
/*
toString: inherited non-enumerable
toLocaleString: inherited non-enumerable 
...
*/

This demonstrates why attempting to merge Maps using spread syntax fails during runtime.

TypeScript did not identify the error of assigning the result to Map due to its inability to differentiate between own/enumerable properties

Given that {...map} results in an empty object, why does TypeScript not raise an error when assigning it to a Map type?

const result: Map<string, number>
  = { ...map, ...map, ...map }; // no error

The issue lies in the fact that the current TypeScript type system lacks the capability to specify whether a property is own/inherited or enumerable/non-enumerable. There exists an ongoing request for this feature at microsoft/TypeScript#9726. Until such functionality becomes a part of TypeScript, the language remains unaware of whether a Map's properties are all own and enumerable. In theory, it would be possible to create an object that mimics a Map instance but with all own and enumerable properties, fooling TypeScript into considering it a valid operation:

// Example similar to a Map instance
const fakeMap: Map<string, number> = {
  get: () => 1, has: () => true, set: () => o,
  ...
}

const p: Map<string, number> = { ...fakeMap }
displayProps(p);
/* 
get: own enumerable
has: own enumerable
set: own enumerable
... 
*/

Due to the compiler's inability to distinguish these scenarios, spreading operations on Map instances appear acceptable to TypeScript.

For more details, refer to microsoft/TypeScript#33081, which addresses this specific issue of spreading Map instances and was closed as a duplicate of microsoft/TypeScript#9726.

In summary, copying Map instances through object spread is not feasible, and TypeScript does not detect this discrepancy.

Playground link to code

Utilizing the spread operator in Typescript to combine multiple Maps into a fresh Map leads to an instance of a clear Object

Edit

Answer №1

Similar questions

forEach was unable to determine the appropriate data types

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

Exploring Angular's filtering capabilities and the ngModelChange binding

Encountering problems with TypeScript in a Node application when using the package manager

Uploading multiple strings to an Amazon S3 bucket using Node.js by piping a string

Guide to converting a string into an undefined type

Creating Beautiful MDX Layouts with Chakra UI

Refreshing Form in Angular 2

Missing data: null or undefined?

An error in typescript involving a "const" assertion and a string array

Implementing conditional where clauses in Firestore queries with dynamic parameters

The type entity i20.CdkScrollableModule cannot be resolved to symbol in the nx workspace

Can someone explain how to create a Function type in Typescript that enforces specific parameters?

What is the best practice for inserting typescript definitions and writing them when the object already has a pre-existing definition?

Stop Mat-chip from automatically inserting a row upon selection

Facing problem with implementing NgMoudleFactoryLoader for lazy loading in Angular 8

Injecting services and retrieving data in Angular applications

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

What could be causing the "buffer is not a function" error to occur?

There are two modals present on the page, however only one of them is triggered for all actions in Angular 2