src/content/docs/linter/rules/use-import-type.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="TypeScript and TSX" icon="seti:typescript"> ## Summary - Rule available since: `v1.5.0` - Diagnostic Category: [`lint/style/useImportType`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has a [**safe**](/linter/#safe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Inspired from [`@typescript-eslint/consistent-type-imports`](https://typescript-eslint.io/rules/consistent-type-imports){
"linter": {
"rules": {
"style": {
"useImportType": "error"
}
}
}
}
Promotes the use of import type for types.
TypeScript allows specifying a type keyword on an import to indicate that the import doesn't exist at runtime.
This allows compilers to safely drop imports of types without looking for their definition.
This also ensures that some modules are not loaded at runtime.
The rule ensures that all imports used only as a type use a type-only import.
It also groups inline type imports into a grouped import type.
If you use the TypeScript Compiler (TSC) to compile your code into JavaScript,
then you can disable this rule, as TSC can remove imports only used as types.
However, for consistency and compatibility with other compilers, you may want to enable this rule.
In that case we recommend to enable TSC's verbatimModuleSyntax.
This configuration ensures that TSC preserves imports not marked with the type keyword.
You may also want to enable the editor setting typescript.preferences.preferTypeOnlyAutoImports from the TypeScript LSP.
This setting is available in Visual Studio Code.
It ensures the type is used when the editor automatically imports a type.
Some frameworks like Angular and NestJS rely on experimental TypeScript decorators which allow code to be generated based on type annotations. This is mainly used for dependency injection.
Since Biome doesn't know how a decorator is implemented, it is unable to detect that an import used as a type is also used as a value in the code generated by a decorator. This leads Biome to suggest importing some imports as type, which are actually used as value at runtime.
We haven't found a way to support this pattern yet. We recommend disabling this rule when using such decorators.
import { A } from "./mod.js";
type TypeOfA = typeof A;
let a: A;
import { type A, type B } from "./mod.js";
import { type A, B } from "./mod.js";
let c: A;
let d: typeof B;
import type { A } from "./mod.js";
let a: A;
import { B } from "./mod.js";
let a: B = new B();
import { type A, B } from "./mod.js";
let c: A;
let d = new B();
The rule ignores unused imports and imports with import attributes.
import { A } from "./mod.js";
import { B } from "./mod.js" with {};
export type { B };
This rule respects the jsxRuntime
setting and will make an exception for React globals if it is set to
"reactClassic".
styleThe style option allows enforcing a style for importing types.
The option supports three values:
inlineType: always use import { type T } instead of import type { T }separatedType: always use import type { T } instead of import { type T }auto: use both import type { T } and import { type T } (default){
"linter": {
"rules": {
"style": {
"useImportType": {
"options": {
"style": "inlineType"
}
}
}
}
}
}
import { A } from "./mod.ts";
export type { A };
{
"linter": {
"rules": {
"style": {
"useImportType": {
"options": {
"style": "separatedType"
}
}
}
}
}
}
import { A } from "./mod.ts";
export type { A };
import { type A, type B } from "./mod.ts";
export type { A, B };