Import 2 classes with same name in JavaScript or TypeScript

# Table of Contents

1. Import two classes with the same name in TypeScript
2. Import two classes with the same name in JavaScript

# Import two classes with the same name in TypeScript

To import two classes with the same name, use the as keyword to rename one or both of the imports. The as keyword allows us to change the identifying name of the import.

Here is an example of an index.ts file, which imports 2 classes named Employee from two other files.

Copied!
import { Employee } from './another-file-1';

// 👇️ rename to Employee2
import { Employee as Employee2 } from './another-file-2';

const emp1 = new Employee(100, 'design');

const emp2 = new Employee2(1, 'James Doe');

Here are the contents of another-file-1.ts.

Copied!
export class Employee {
  constructor(public salary: number, public department: string) {
    this.salary = salary;
    this.department = department;
  }
}

And here are the contents of another-file-2.ts.

Copied!
export class Employee {
  constructor(public id: number, public name: string) {
    this.id = id;
    this.name = name;
  }
}

The path of the imports in the index.ts file assumes that the other files are located in the same directory.

For example, if the classes are located one directory up, you would have to import from '../another-file-1'.

You can use the as keyword in your imports and exports.

For example, we could export one of the classes using a different name.

Copied!
class Employee {
  constructor(public salary: number, public department: string) {
    this.salary = salary;
    this.department = department;
  }
}

export { Employee as Employee1 }; // 👈️ export as Employee1

We renamed the export of the Employee class to Employee1, so now you would import it as:

Copied!
import { Employee1 } from './another-file-1';

import { Employee as Employee2 } from './another-file-2';

const emp1 = new Employee1(100, 'design');

const emp2 = new Employee2(1, 'James Doe');

The as keyword can be used to rename both imports and exports.

If one or both of your classes use default exports, you don't have to use the as keyword, because you are able to directly rename a default export when importing.

Copied!
// 👇️ uses default export
export default class Employee {
  constructor(public salary: number, public department: string) {
    this.salary = salary;
    this.department = department;
  }
}

Now we can import the Employee class as Employee1 without using the as keyword.

Copied!
// 👇️ can directly rename when importing
import Employee1 from './another-file-1';

import { Employee as Employee2 } from './another-file-2';

const emp1 = new Employee1(100, 'design');

const emp2 = new Employee2(1, 'James Doe');

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports (for functions, classes, variables) in a single file, you would get an error.

In my experience, most real-world codebases exclusively use named exports and imports, because they make it easier to leverage your IDE for auto-completion and auto-imports.

I've also written a detailed guide on how to import values from another file in TS.

# Import two classes with the same name in JavaScript

To import two classes with the same name, use the as keyword to rename one or both of the imports.

The as keyword allows us to change the identifying name of the import.

Here is an example of an index.js file, which imports 2 classes named Employee from two other files.

Copied!
import {Employee} from './another-file-1.js';

// 👇️ rename to Employee2
import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

Here are the contents of another-file-1.js.

Copied!
// 👇️ named export
export class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

And here are the contents of another-file-2.js.

Copied!
// 👇️ named export
export class Employee {
  constructor(id, department) {
    this.id = id;
    this.department = department;
  }
}

The path of the imports in the index.js file assumes that the other files are located in the same directory.

For example, if the classes are located one directory up, you would have to import from '../another-file-1.js'.

You can use the as keyword to rename your imports and exports.

For example, we could export one of the classes using a different name.

Copied!
class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

export {Employee as Employee1}; // 👈️ export as Employee1

We renamed the export of the Employee class to Employee1, so now you would import it as:

Copied!
import {Employee1} from './another-file-1.js';

import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee1('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

The as keyword can be used to rename both imports and exports.

If one or both of your classes use default exports, you don't have to use the as keyword because you are able to directly rename a default export when importing.

Copied!
// 👇️ uses default export
export default class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }
}

Now, we can import the Employee class as Employee1 without using the as keyword.

Copied!
// 👇️ can directly rename when import (because default export)
import Employee1 from './another-file-1.js';

import {Employee as Employee2} from './another-file-2.js';

const emp1 = new Employee1('Alice', 100);
console.log(emp1.name); // 👉️ 'Alice'

const emp2 = new Employee2(1, 'web developer');
console.log(emp2.department); // 👉️ 'web developer'

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports (for functions, classes, variables) in a single file, you would get an error.

In my experience, most real-world codebases exclusively use named exports and imports, because they make it easier to leverage your IDE for auto-completion and auto-imports.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Import Values from Another file in TypeScript
• How to Import a JSON file in TypeScript
• Import and use the 'fs' module in TypeScript
• TypeScript: Cannot use import statement outside a module
• ReferenceError: exports is not defined in TypeScript [Fixed]
• How to conditionally import ES6 Modules in JavaScript