TypeScript Named Import

A named import is a module resolution mechanism used to extract specific, explicitly exported bindings—such as variables, functions, classes, types, or interfaces—from an external module into the current module’s scope. Unlike default imports, named imports require exact identifier matching between the exporting module and the importing module, enabling static analysis and precise tree-shaking.

Basic Syntax

Named imports utilize destructuring-like syntax within curly braces {} to specify the exact identifiers to be imported.

// Importing a single member
import { Identifier } from './module-path';

// Importing multiple members
import { IdentifierA, IdentifierB, IdentifierC } from './module-path';

Identifier Aliasing

To prevent namespace collisions within the local scope, named imports support immediate renaming using the as keyword. This binds the exported member to a new local identifier.

import { OriginalName as LocalName } from './module-path';

TypeScript-Specific Extensions: Type-Only Imports

TypeScript extends standard ECMAScript named imports with the type modifier. This explicitly instructs the TypeScript compiler that the imported binding is used exclusively in the type system (e.g., as an interface or type alias). The compiler guarantees the erasure of these imports during the JavaScript emit phase, ensuring no runtime overhead or strict-mode module resolution errors. Module-Level Type Import: Applies the type-only constraint to all named imports within the statement.

import type { UserInterface, UserState } from './user-types';

Inline Type Import (TypeScript 4.5+): Allows mixing runtime value imports and compile-time type imports within a single named import statement by prefixing individual identifiers with the type keyword.

import { fetchUserData, type UserInterface } from './user-module';

Binding Mechanics

Named imports create a live, read-only view of the exported binding. The imported identifier cannot be reassigned within the importing module (e.g., IdentifierA = newValue will throw a compiler error), but if the exporting module mutates the underlying value, the imported binding will reflect that updated state.

Tired of Poor TypeScript Skills? Fix That With Deep Grasping!Learn More