> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
```typescript theme={"dark"}
// 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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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
