如何在 TypeScript 中导出多个类

在 TypeScript 中导出多个类

How to export multiple Classes in TypeScript

使用命名导出在 TypeScript 中导出多个类，例如
export class A {}和export class B {}. 可以使用命名的 import as 导入导出的类import {A, B} from './another-file'。您可以在一个文件中根据需要拥有尽可能多的命名导出。

下面是一个从名为
another-file.ts.

// 👇️ named export
export class Employee {
  constructor(public id: number, public salary: number) {
    this.id = id;
    this.salary = salary;
  }
}

// 👇️ named export
export class Person {
  constructor(public name: string) {
    this.name = name;
  }
}

请注意，export在与类的定义相同的行上使用与在声明类后将其导出为对象相同。

class Employee {
  constructor(public id: number, public salary: number) {
    this.id = id;
    this.salary = salary;
  }
}

class Person {
  constructor(public name: string) {
    this.name = name;
  }
}

// 👇️ named exports
export { Employee, Person };

以下是我们如何将
类导入名为index.ts.

// 👇️ named imports
import { Employee, Person } from './another-file';

const employee = new Employee(1, 100);
console.log(employee.salary); // 👉️ 100

const person = new Person('James');
console.log(person.name); // 👉️ "James"

Make sure to correct the path that points to the another-file module if you
have to. The example above assumes that another-file.ts and index.ts are
located in the same directory.

For example, if you were importing from one directory up, you would do
import {Employee, Person} from '../another-file'.

TypeScript uses the
concept of modules,
in the same way that JavaScript does.

The example above uses named exports and named imports.

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 in a single file, you would get an
error.

// ⛔️ Error: A module cannot have
// multiple default exports.ts(2528)
export default class Employee {
  constructor(public id: number, public salary: number) {
    this.id = id;
    this.salary = salary;
  }
}

export default class Person {
  constructor(public name: string) {
    this.name = name;
  }
}

IMPORTANT: If you are exporting a variable (or an arrow function) as a
default export, you have to declare it on 1 line and export it on the next. You
can’t declare and default export a variable on the same line.

Having said that, you can use 1 default export and as many named exports as
you need in a single file.

Let’s look at an example that exports multiple classes and uses both – default
and named exports.

// 👇️ default export
export default class Employee {
  constructor(public id: number, public salary: number) {
    this.id = id;
    this.salary = salary;
  }
}

// 👇️ named export
export class Person {
  constructor(public name: string) {
    this.name = name;
  }
}

And here is how you would import the two classes.

// 👇️ default and named imports
import Employee, { Person } from './another-file';

const employee = new Employee(1, 100);
console.log(employee.salary); // 👉️ 100

const person = new Person('James');
console.log(person.name); // 👉️ "James"

Notice that we didn’t wrap the default import in curly braces.

We used a default import to import the Employee class and a named import to
import the Person class.

每个文件只能有一个默认导出，但您可以根据需要拥有任意多个命名导出。

您也不必考虑使用默认导出或命名导出导出哪些成员。