打字稿导入 - 每个文件约定一个类

Question

我刚刚开始使用 Typescript 进行前端 Web 项目。我的目标是使用 OOP 方法。所以我的约定是一个文件一个类（以它包含的类命名）。

考虑这个例子：

//Car.ts
export default class Car {
    public startEngine (): void {
        console.log('vroom!');        
    }
}

---

//RaceCar.ts
import Car from './Car';

export default class RaceCar extends Car {
    public startEngine (): void {
        console.log('!!VROOOOOMM!!');        
    }
}

---

//index.ts 
import RaceCar from './RaceCar';
import Car from './RaceCar';

const car:Car = new RaceCar();

car.startEngine();

此代码运行良好，但我有 2 个问题：

• 当我使用约定“每个文件一个类”（默认导出）时，写import Car from './Car'; 真的很烦人。有没有捷径可以做到这一点？比如宏什么的？我试过import './Car'; 但当然这不会导入Car 符号...
• 另一个烦人的事情是在 index.ts 中导入 Car 和 RaceCar。有没有办法只导入已经知道 Race 类的 RaceCar？

换句话说，我正在寻找一种方法来执行 C++ 包含之类的操作。

Answer 1

当我使用约定“每个文件一个类”（默认导出）时，编写 import Car from './Car'; 真的很烦人。有没有捷径可以做到这一点？比如宏什么的？我试过 import './Car';但这当然不会导入汽车符号...

要使用汽车，代码必须是import Car from './Car'。这种语法基本上意味着“在./Car 中运行代码，并将其默认导出分配给Car”。 import './Car' 是合法的，但它的意思是“在 ./Car 中运行代码，但我不需要使用它导出的内容”。

也就是说，各种 IDE 可以帮助您自动填写导入。例如，我使用 Visual Studio Code，如果我在代码中的某处使用 Car 而不导入或定义它，我会得到红色下划线，然后在大多数情况下可以按 ctrl-space 自动导入它。

另一个烦人的事情是在 index.ts 中导入 Car 和 RaceCar。有没有办法只导入已经知道 Race 类的 RaceCar？

如果您需要直接引用 Car 文件导出的任何内容，则需要导入它。在您的示例中，您使用 Car 作为类型。如果你需要它，那么你需要导入它。也就是说，在您的情况下，我可能只使用 RaceCar 作为类型，因为无论如何这就是您要更新的内容。

import RaceCar from './RaceCar';

const car: RaceCar = new RaceCar();
car.startEngine();

Answer 2

TypeScript 使用 +ES6 语法：

根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

导入整个模块仅用于副作用，不导入 任何事物。这会运行模块的全局代码，但实际上并没有 导入任何值。

import '/modules/my-module.js';

你需要导入你要使用的符号：

import myDefault from '/modules/my-module.js'; // myDefault is the default exported symbol in the module.

因此，没有。您始终需要显式地导入要使用的符号，并且只能从需要使用它们的这些代码位置导入。