Skip to main content

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.

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. 
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): 
export default class PrimaryService {
    constructor() {}
}
Importing Module (consumer.ts): 
// 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: 
import DefaultBinding, { NamedBindingA, NamedBindingB } from "./module-path";
Combined with Namespace Imports: 
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. 
{
  "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.
Master TypeScript with Deep Grasping Methodology!Learn More