Import 2 classes with same name in JavaScript or TypeScript

avatar
Borislav Hadzhiev

Last updated: Mar 6, 2024
4 min

banner

# 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.

index.ts
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');
The code for this article is available on GitHub
If you use JavaScript (and not TypeScript), scroll down to the next subheading.

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

another-file-1.ts
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.

another-file-2.ts
export class Employee { constructor(public id: number, public name: string) { this.id = id; this.name = name; } }

import two classes with same name in typescript

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.

another-file-1.ts
class Employee { constructor(public salary: number, public department: string) { this.salary = salary; this.department = department; } } export { Employee as Employee1 }; // ๐Ÿ‘ˆ๏ธ export as Employee1
The code for this article is available on GitHub

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

index.ts
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');

export one class using different name

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.

another-file-1.ts
// ๐Ÿ‘‡๏ธ 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.

index.ts
// ๐Ÿ‘‡๏ธ 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');

using default and named exports and imports

The code for this article is available on GitHub

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.

index.js
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.

another-file-1.js
// ๐Ÿ‘‡๏ธ named export export class Employee { constructor(name, salary) { this.name = name; this.salary = salary; } }

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

another-file-2.js
// ๐Ÿ‘‡๏ธ 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.

another-file-1.js
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:

index.js
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.

another-file-1.js
// ๐Ÿ‘‡๏ธ 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.

index.js
// ๐Ÿ‘‡๏ธ 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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev