Should I explicitly separate "import" and "import type" statements?

^{A.S.: This is an opinion-based question, I cannot ask such on StackOverflow}

I've been using the import type statement for a while now, and I wonder, what was the intended use-case for it:

Is it a separate TypeScript-exclusive fully-fledged feature, i.e. "import for types"? Or
is it an extension to regular import, designed to be used in the case when only type information is actually used, i.e. fallback?

I always thought of import type as "import for types", the first option, so the code always looked like this:

  import type { Type } from "some-module";
+ import { value } from "some-module";

… but auto-import in VSCode suggests it is actually the second, fallback-ish:

- import type { Type } from "some-module";
+ import { Type, value } from "some-module";

Now, I understand that both will work correctly, and it is basically a matter of stylistic choice for the team, but the authors' original intention is important for me, and I'm a sole developer in this case

Ideally one goes for -
import { Type, value } from "some-module";
import type { Type } from "some-module"; for solving specific transcompiler issue like Babel js.
How the error is reproduced:
Transcompilers like Babel JS removes the types whilst transpiling,but it may happen sometimes that whilst transpiling it isn't sure whether a specific import is simply a type (that can be removed ) or an actual value(that is to be kept)
For example:
import { Type } from "./types"; const changeType = (val : Type) => { //some logic }; is transpiled to
const changeColor = (color) => { window.color = color; }; simply by removing the type.
But removing types simply isn't so obvious in this case:
import { Type } from "./types"; export { Type };
Hence, we need to explicity define these type imports as import type {Type} .
Otherwise,you should use the generic import {Type}

The intention is for you not to use import type unless you need to. There’s some discussion related to auto-import at #39432, and there’s a thorough description of the motivations for introducing the feature on the original PR: #35200.

If you don’t have a specific need for type-only imports, you could consider them a stylistic choice. My personal suggestion for how to consider that stylistic choice is

Best style: do not use import type. This style choice eliminates meaningless distinctions and reduces cognitive load, giving you more time and resources to think about things that matter.
Second-best style: enable "importsNotUsedAsValues": "error" in your tsconfig, then use import type only where the errors force you to.
Worst style: use import type as much as possible, separating values and types from the same module into separate import statements. There is simply no reason to do this, and since there are currently no tools that would enforce this style, it would fall on you to analyze and separate your declarations manually, wasting your valuable coding time.

Andrew Branch (@andrewbranch)

Thanks, Andrew Branch (@andrewbranch), great to hear the author's intent first-hand 👍

I'd argue that the second presented option is actually the best one; import type, I think, is a useful feature, consistently avoiding using it would be kind of silly. That's up to debate though.

I apologize tremendously for reopening this very old thread. Now we have 3 ways to import types

Based on the discussion, I think I should then use the 3 way, right?
import { type Type, value } from "some-module";

Those each have different meanings and you should use the one corresponding to the behavior you want to have happen.

Those each have different meanings and you should use the one corresponding to the behavior you want to have happen.

Where can i read more about the different meaning between
import type { AuthState } from "..." and import { type AuthState } from "..."?

Christoffer Bjelke (@chribjel)

Christoffer Bjelke (@chribjel) Above all, the type in

import type { Thing, OtherThing } from "things"

… applies to both Thing and OtherThing, while in

import { type Thing, OtherThing } from "things"

… the type only applies to Thing, while OtherThing is imported as a value (if it is a value).

Dmytro Parzhytskyi (@parzhitsky)

Dmytro Parzhytskyi (@parzhitsky) That is what i assumed, just got confused when Ryan said the three imports had different meaning.

If you only have ONE imported type they have the same "meaning", or at least ends up meaning the same thing.

If you only have ONE imported type they have the same "meaning", or at least ends up meaning the same thing.

Not under --verbatimModuleSyntax.

// index.ts
import type { Thing } from "things-1";
import { type Thing } from "things-2";

becomes

// index.js
import {} from "things-2";

Navigation Menu

Repository navigation

Should I explicitly separate "import" and "import type" statements? #39861

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Should I explicitly separate "import" and "import type" statements? #39861

Description

Activity

iraj465 commented on Aug 2, 2020

andrewbranch commented on Aug 3, 2020

parzhitsky commented on Aug 3, 2020

Angelfire commented on Mar 21, 2024

RyanCavanaugh commented on Mar 21, 2024

chribjel commented on Mar 30, 2024

parzhitsky commented on Mar 30, 2024

chribjel commented on Mar 31, 2024

andrewbranch commented on Apr 1, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions