import type
A type-only import that disappears completely from the generated JavaScript.
Example
#// src/lessons.ts
import type { Course } from './types'
import { type Lesson, formatMinutes } from './format'
export function describeLesson(course: Course, lesson: Lesson): string {
return `${course.title}: ${lesson.title} (${formatMinutes(lesson.minutes)})`
}
// Compilation result (JavaScript):
// import { formatMinutes } from './format';
// export function describeLesson(course, lesson) {
// return `${course.title}: ${lesson.title} (${formatMinutes(lesson.minutes)})`;
// }Definition and usage
#The syntax import type { Course } from "./types" imports only types from a module. After compilation, such an import vanishes without a trace, so the module isn’t loaded at runtime. You won’t accidentally add code to the bundle, and you won’t create a circular dependency just because you need a type from another module.
You can also mark individual names inside a regular import: import { type Lesson, formatMinutes } from "./format". Lesson disappears from the JavaScript, and formatMinutes stays. export type { … } works the same way when re-exporting types from another module.
A name imported with import type can only be used as a type. A class or enum imported this way can’t be used with new, instanceof, or Object.values(). Marking type imports is required with the verbatimModuleSyntax option, and it helps tools that transpile each file separately, such as esbuild, SWC, or Babel.
Syntax
#import type { Type } from "./module"
import { type Type, value } from "./module"
export type { Type } from "./module"More examples
#import type { Level, Certificate } from './types'
let saved: Certificate | null = null // used as a type: fine
const levels = Object.values(Level)
// Error: 'Level' cannot be used as a value because it was imported using 'import type'.
const cert = new Certificate('Ania')
// Error: 'Certificate' cannot be used as a value because it was imported using 'import type'.// src/index.ts
export type { Course } from './types'
export { type Lesson, formatMinutes } from './format'Good practices
#- The lint rule
@typescript-eslint/consistent-type-importsenforces marking type imports and can fix them automatically. - If two modules import each other only to use each other’s types, change those imports to
import type. The circular dependency disappears from the running program. - With the
verbatimModuleSyntaxoption,import { type A } from "./a"leaves an empty importimport {} from "./a"in the JavaScript, whileimport type { A }disappears completely. When you take only types from a module, chooseimport type.
Related entries
#- declare and .d.ts filesDescribing the types of something that exists outside your TypeScript code: global variables, JavaScript libraries, and modules.
- typeof (in types)Gets the type of a variable or value so you can use it somewhere else.
- interfaceA named description of an object’s shape that you can extend and merge.
Spotted a mistake or missing an example? Write to us.