How To Strongly Type process.env
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
A couple of years ago, Sentry were having big problems with their React app. They'd pretty recently migrated it to TypeScript from JavaScript. And the app was part of a large monorepo.
But the IDE performance was slow. You'd often need to wait a couple of seconds after making a change for the TypeScript language server to update. And running tsc
would take a long time.
Now, this isn't unusual for a large TypeScript codebase. But the Sentry team had a hunch that something was wrong. The problem felt out of proportion to the size of the codebase.
It turned out that the issue, outlined by Jonas, was down to a single pattern.
In tons of places in Sentry's codebase, they were extending HTML types in React. For instance, defining ButtonProps
would look like this:
tsx
importReact from "react";typeButtonProps =React .HTMLAttributes <HTMLButtonElement > & {extraProp : string;};constButton = ({extraProp , ...props }:ButtonProps ) => {console .log (extraProp );return <button {...props } />;};
This means that you could pass in all the props that a <button>
element could take, plus an extraProp
:
tsx
<Button extraProp ="whatever"onClick ={(e ) => {}}/>;
But it turns out that this pattern is devilishly slow. So Jonas, following the advice of the TypeScript Performance Wiki, changed each of these to use an interface
instead:
tsx
importReact from "react";interfaceButtonProps extendsReact .HTMLAttributes <HTMLButtonElement > {extraProp : string;}
Suddenly, things got a lot snappier. The TypeScript language server was faster, and tsc
ran quicker. Just from a little syntax change. Why?
You may have heard that interface
is slightly faster than type
. This is not quite true. In fact, interface extends
is slightly faster than &
.
In an earlier version of this article, I'd posted an explanation based on some fuzzy thinking which, thanks to my old colleague Mateusz Burzyński, I now understand was wrong.
The problem is more complex than I realised - check out this thread for his critiques and our investigations.
Hopefully, I can update this article again with a definitive description of why this happens - but nothing is simple when it comes to TypeScript performance.
Suffice to say - interface extends
is generally faster than &
, and so it proved in this case too.
Share this article with your friends
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
Discover when it's appropriate to use TypeScript's any
type despite its risks. Learn about legitimate cases where any
is necessary.
Learn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.
In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.
Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.
Learn how to set up TypeScript to bundle a Node app using pnpm, Node.js, TypeScript, and ES Modules for a seamless development experience.