Do I need to use the "import type" feature of TypeScript 3.8 if all of my imports are from my own file?
Short answer: Being more explicit by using import type
and export type
statements seem to yield explicable benefits by safeguarding against edge-case problems, as well as giving current and upcoming tooling better ground for improving processing performance and reliability with type definition analysis.
Long answer:
As TypeScript 3.8 release notes say:
import type
only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there’s no remnant of it at runtime. Similarly, export type only provides an export that can be used for type contexts, and is also erased from TypeScript’s output.
Here are two practical examples how these remnant imports can cause errors in build or runtime:
- Strange type-related Webpack error fixed by
import type
statement, a blog post: Leveraging Type-Only imports and exports with TypeScript 3.8 - An SO question about remnant imports causing circular dependency reference errors
Another benefit relates to tooling that is analyzing type definitions. Currently there are details about benefits with bundler setups using Babel, but may currently or later benefit other tooling as well (like IDE performance).
For Babel users manually configuring their setup: If you are using Babel 7.9=> in your bundler setup with TS 3.8=>, then you can possibly remove the previously needed @babel/plugin-transform-typescript
plugin.
For those setups that are using pre-built Babel presets: Babel's team is recommending of configuring Babel presets so that explicit type-only imports are to be used.
Read more in a blog post: Babel 7.9 Reduces Bundle Sizes, Adds TypeScript 3.8 Support.
More of relevant info about Using Babel with TypeScript in TS docs.
Detailed look into benefits using and how isolatedModules
TS compiler option works type-only imports — A new TypeScript feature that benefits Babel users
Ilya Chernomordik
You know, everyone wants a badge, so I have to write something in here :)
Updated on October 08, 2020Comments
-
Ilya Chernomordik over 3 years
I have a simple file
types.ts
that defines some types:export interface MyInterface { // ... } export const enum MyEnum { // ... } export type MyType = { // ... }
I have read about the new feature
import type
for the latest typescript here. As far as I understand it is meant to fix specific problems which seems mostly to happen when importing from .js files.I can import my types with both
import
andimport type
statements. Both seems to work equally fine. The question is should I preferimport type
for being more explicit and helping me to avoid some theoretical edge-case problems or can I just useimport
for simplicity and rely onimport elision
to remove these from compiled code?In other words: is there any benefit of using
import type
here or it should rather be used for specific cases to work aroundimport elision
shortcomings? -
liby almost 3 years> If you are using Babel 7.9=> in your bundler setup with TS 3.8=>, then you can possibly remove the previously needed @babel/plugin-transform-typescript plugin. ---- Excuse me, is there a context for this?
-
Chen Ni over 2 yearsBut isn't TypeScript supposed to not exist at runtime? In my understanding, even
import
is fully erased at runtime. -
RcoderNY almost 2 years@Chen Ni - TypeScript in the form of what you wrote doesn't "exist" at runtime but it doesn't just completely disappear. It is transpiled into JavaScript so what you write in TypeScript has a direct effect on what JavaScript is output. Depending on your JS target your
import
statements may not even change that much from the TS version.