Typescript import - 每个文件约定一个类

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

这段代码工作正常，但我有两个问题：

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

换句话说，我正在寻找一种方法来做一些像C ++包含的东西。

Answer 1

当我使用约定“每个文件一个类”（默认导出）时，从'./Car';中编写导入Car真的很烦人。有一个简短的方法吗？像宏或什么？我尝试过导入'./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.

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