Import two classes with the same name in TypeScript

avatar

Borislav Hadzhiev

Tue Mar 22 20222 min read

banner

Photo by Mes

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, e.g. import { Employee as Employee2 } from './another-file-2';. 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');

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; } }

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

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');

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');

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 autocompletion and auto-imports.

Use the search field on my Home Page to filter through my more than 1,000 articles.