TypeScript: Prefer Interfaces

Nicholas Jamieson
Dec 3, 2020 · 3 min read
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:

alt (github.com)

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

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:

alt (github.com)

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

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:

alt (github.com)

compilation will fail with an error:

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 +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

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 & +787K 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 & +787K 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