Typescript 1.8 模块：从文件夹中导入所有文件

Posted 2023-03-13

【中文标题】Typescript 1.8 模块：从文件夹中导入所有文件

【英文标题】：Typescript 1.8 modules: import all files from folder

【发布时间】：2016-11-04 15:13:16

【问题描述】：

我正在使用 Typescript 构建一个大型库，其中包含 100 个单独的 ts 文件。 以前我对我的所有类都使用 export module XXX（后来重命名为 export namespace XXX），但正如书籍所说，这不是推荐的方式，我应该使用 import .

所以我尝试导入。这很好用：

import * as mylib from "./source/source.ts";

但由于我有 100 个文件，我不想为所有文件添加这样的一行。我希望我的所有类都可以通过 mylib 变量访问。

所以我尝试了这个：

import * as mylib from "./source/";

但是一旦我这样做，我就会得到：找不到模块'./source/'

有没有办法从包含多个文件的文件夹中导入所有类？

【问题讨论】：

您可以连接所有这些文件。这样你只需要导入一个模块。或者，您可以列出目录 fs.readdir('sources') 和 require() 中的所有文件，然后在 for each 循环中列出。

【参考方案1】：

tsc 提供的两种模块解析策略都不支持这种行为。你想要什么导入语句

import * as mylib from "./source/";

实际上是按这个顺序执行检查：

1. (does package.json have a typings key? If so, import this file)
2. import * as mylib from "./source/index.ts";
3. import * as mylib from "./source/index.tsx";
4. import * as mylib from "./source/index.d.ts";

我假设您在这里使用的是节点样式的模块解析，您可能会这样做，因为这是推荐的方式。查看typescript docs 了解有关如何在 typescript 中完成模块解析的更多详细信息。

通常，您想要完成的是创建一个index.d.ts 文件，该文件用作您导出其余模块的入口点。 我以 angular2 为例： 您常见的 angular2 导入如下所示：

import  Injectable  from '@angular/core'

core 只是一个位于@angular 目录中的目录。就像您的 source 目录一样。但是，在核心目录中存在一个index.d.ts 文件：

/**
 * @module
 * @description
 * Starting point to import all public core APIs.
 */
export * from './src/metadata';
export * from './src/util';
export * from './src/di';
....

【讨论】：

谢谢这工作正常！我开始应用这种方法并面临另一个问题：***.com/questions/38168733/…也许你也知道答案:)

还有另一个相关的问题 - 在我自己的项目中，我可以导入所有类（可能使用 index.d.ts 吗？）而不是一一导入我在课堂上使用的那些？还是这是错误的想法？

我认为这不是一个好主意，因为您的 webpack/browserify 脚本加载器无法检测不同配置的严格源边界。例如管理模块及其依赖项、公共网站及其依赖项。您将始终下载所有资源，即使其中一些不会用于特殊页面。

其实@angular/core里面的.d.ts文件叫做core.d.ts，而不是index.d.ts，至少在Angular 4中

此限制是否涉及合乎逻辑的业务决策，还是只是性能问题/没有人完全创建该功能？