TypeScript: Prefer Interfaces

Nicholas Jamieson
Dec 3, 2020 · 3 min read
Image for post
Image for post
Photo by Markus Spiske on Unsplash

Recently, I noticed a Twitter thread from Rob Palmer in which he described some performance problems that were caused by the use of type alias declarations in TypeScript.

Specifically, the use of a type alias declaration effected a much larger .d.ts output:

Yesterday I shrank a TypeScript declaration from 700KB to 7KB by changing one line of code 🔥

In the thread, Rob points out that the reason this happens is because type alias declarations can be inlined, whereas interfaces are always referenced by name.

Let’s have a look at some code that demonstrates this inlining behaviour.

Here’s a TypeScript playground snippet in which a type alias is used to declare the callback signature:

Image for post
Image for post
alt (github.com)

The effected .d.ts output — which is shown in the playground’s right-hand-side panel — looks like this:

Image for post
Image for post
alt (github.com)

The ReadCallback type alias is included in the .d.ts output and the read function’s signature refers to it by name.

However, the output will be different if we scope the type alias declaration — by shoving it into an IIFElike this:

Image for post
Image for post
alt (github.com)

The scoped type alias declaration won’t be included in the output and callback’s signature will be inlined:

Image for post
Image for post
alt (github.com)

IIFEs aren’t the only scenario in which inlining can occur. They’re used here so that inlining can be demonstrated in the TypeScript playground.

Inlining is something that won’t happen with interfaces, as interfaces are always referred to by name. If an interface is scoped in a similar manner, like this:

Image for post
Image for post
alt (github.com)

compilation will fail with an error:

Image for post
Image for post
alt (github.com)

Interfaces aren’t inlined. They are referred to by name and if the name is private, compilation will fail.

In early versions of TypeScript, the behavioural differences between type aliases and interfaces were significant. However, in recent versions there is less of a distinction and that has led to some developers preferring type aliases over interfaces.

The performance problems mentioned in Rob’s thread suggest that perhaps interfaces should be preferred. And Daniel Rosenwasser’s endorsement of interfaces is emphatic:

Honestly, my take is that it should really just be interfaces for anything that they can model. There is no benefit to type aliases when there are so many issues around display/perf.

We tried for a long time to paper over the distinction because of people’s personal choices, but ultimately unless we actually simplify the types internally (could happen) they’re not really the same, and interfaces behave better.

For developers interested in ensuring that interfaces are used wherever possible, I’ve added a prefer-interface ESLint rule to eslint-plugin-etc. It will effect a lint failure whenever it finds a type alias declaration that could be declared as an interface. The rule has a fixer — and a suggestion — and can replace type alias declarations automatically.

Rob has written about the types/interfaces issue — and a whole lot more — in his blog post: 10 Insights from Adopting TypeScript at Scale

And, in the TypeScript documentation, Daniel gives some reasons for preferring interfaces over intersections.

This post was first published on my personal blog: ncjamieson.com.

The Startup

Get smarter at building your thing. Join The Startup’s +776K followers.

Nicholas Jamieson

Written by

RxJS core team member; front-end developer; mentor; speaker; open-source contributor

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +776K followers.

Nicholas Jamieson

Written by

RxJS core team member; front-end developer; mentor; speaker; open-source contributor

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +776K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store