Difference between { [key in string]: any } and Record<string, any>

[mesqueeb]

🤔 Question

My question is about the difference between { [key in string]: any } and Record<string, any> and their use cases.

Describe your question

I often have cases where I allow people to pass any plain JS object and will do something with that object, and pass back a new object based on the original, but with some changes.

some examples include:

• clone a plain object (copy-anything)
• merge two plain objects (merge-anything)
• find and replace a value in an object and return a new object with the replaced value (find-and-replace-anything)
• flatten a "deep" object into dot-notation flat object (flatten-anything)
• pick or omit props from an object and return a new (filter-anything)
• (and more)

Often I differentiate via JS between "plain objects" and "class instances" by looking at the prototype.

Now, currently in most cases I was just using a type like this for plain objects:

{ [key: string]: any }

But since there were merge issues, you've explained before it's better to use:

{ [key in string]: any }

so in many libraries I've been slowly replacing the types to that.

However, it seems many users use Record<string, any> as a "plain object" type...

So considering my use cases above, what do you recommend I use?

Search tags, topics

#typescript #types #plain-objects #plain-object-type #object-type #record #faq #question

[mesqueeb]

I believe the answer is

Record<string, any>
==
{ [key in string]: any }

so it's a matter of preference / readability

[millsp]

Yep, no difference