TypeScript What 'string & {}' mean meaning?

Give an example, we define a Color type:

type Color = "primary" | "secondary" | string;

Then we use it like this:

const color: Color = "primary";

But there's an issue:

We aren't getting color suggestions when we use the Color type.

We want primary and secondary to be on that list. How do we manage that?

We can intersect the string type in Color with an empty object like this:

type Color = "primary" | "secondary" | (string & {});

Now, we'll get suggestions for primary and secondary when we use the Color type.

---

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Comments

[Mikhael Esa]

Can you explain what does type Color = "primary" | "secondary" | (string & {}); has to offer compared to the basic intersection type Color = "primary" | "secondary";

Because the basic intersection can already give the suggestion.

[Nhan Nguyen]

I want "primary", and "secondary" to appear in the suggestion list. And other strings should be accepted:

[Dmytro Shchehlov]

@nhannguyendevjs
DX is a great thing, but sometimes we read code without intellisence.
So the code

type Color = "primary" | "secondar" | (string & {});

confuses too much.