If you’ve been writing TypeScript for a while, you might have written code like this:
// utils.ts
export type Color = 'red' | 'blue' | 'green';
// app.tsx
import {Color} from './utils';
As of TypeScript 3.8, there’s a better way to import!
// app.tsx
import type {Color} from './utils';
The difference here is one keyword, type. This tells the compiler: “Color is
a type. You can erase it after transpilation.” The export is also erased when
we use type.
This solves a problem many developers might never have had. Consider this import:
// app.tsx
import {Color, Wrapper, Container} from './utils';
Color is a type, but Wrapper and Container are React components. Which
ones should the TypeScript compiler keep in the transpiled JavaScript? It can’t
be all three, because Color is a type that JavaScript can’t evaluate.
Type-only imports and exports solves this by telling TypeScript what to do.