> ## 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 Default Import
A default import is an ECMAScript module (ESM) syntax construct used to bind a module's single `default` export to a local identifier. Unlike named imports, a default import does not use curly braces (`{}`) and allows the importing module to assign an arbitrary local name to the imported binding.
```typescript theme={"dark"}
import LocalIdentifier from "./module-path";
```
## Mechanical Requirements
For a default import to resolve successfully, the target module must explicitly declare an entity using the `export default` keywords. A module is strictly limited to one default export.
**Source Module (`source.ts`):**
```typescript theme={"dark"}
export default class PrimaryService {
constructor() {}
}
```
**Importing Module (`consumer.ts`):**
```typescript theme={"dark"}
// The local identifier 'ServiceAlias' binds to the 'PrimaryService' class
import ServiceAlias from "./source";
```
## Syntax Variations
Default imports can be combined with named imports or namespace imports in a single declaration. The default import must always precede the named or namespace bindings.
**Combined with Named Imports:**
```typescript theme={"dark"}
import DefaultBinding, { NamedBindingA, NamedBindingB } from "./module-path";
```
**Combined with Namespace Imports:**
```typescript theme={"dark"}
import DefaultBinding, * as NamespaceBinding from "./module-path";
```
## TypeScript Compiler Interoperability
When TypeScript compiles ESM syntax to CommonJS (`module.exports`), default imports require specific compiler configurations to handle the impedance mismatch between the two module systems.
If you attempt to default-import a CommonJS module that does not have a `default` property, TypeScript will throw an error unless the `esModuleInterop` flag is enabled in the `tsconfig.json`.
```json theme={"dark"}
{
"compilerOptions": {
"esModuleInterop": true
}
}
```
When `esModuleInterop` is enabled, TypeScript emits a helper function (`__importDefault`) during compilation. This helper checks if the target module is an ES module; if it is not, it wraps the CommonJS module object in an object with a `default` key, allowing the default import syntax to function correctly at runtime.
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
