[英]How do I export multiple interfaces in a nested way in TypeScript?
I have a pretty large npm module written in TypeScript, which exposes a number of types, including several interfaces.我有一个相当大的 npm 模块,用 TypeScript 编写,它公开了许多类型,包括几个接口。 Now these interfaces do not all make sense at the root level, which is why I would like to expose them in a way that they can be imported in a somewhat nested way.
现在这些接口在根级别并不都有意义,这就是为什么我想以一种可以以某种嵌套方式导入它们的方式公开它们。
Basically, I'm looking for a way to expose interface so that the user of the module can do:基本上,我正在寻找一种公开界面的方法,以便模块的用户可以执行以下操作:
import { Foo } from 'my-module';
import { Bar } from 'my-module/sub-part';
Is this possible in TypeScript, and if so, how?这在 TypeScript 中是否可能,如果可以,怎么做? What does not work is this code in the root
index.ts
file:根
index.ts
文件中的这段代码不起作用:
export {
Foo,
{ Bar }
};
Please note that the .ts
files are not located at the root directory of the module, and so the .js
and .d.ts
files aren't either.请注意,
.ts
文件不在模块的根目录下,因此.js
和.d.ts
文件也不在。
How can I solve this?我该如何解决这个问题?
PS: It's not about default vs named export here, since I want to have a solution for exporting interfaces in multiple nested levels. PS:这里不是关于默认导出与命名导出,因为我想有一个解决方案来导出多个嵌套级别的接口。
In the easiest case, you just have separate index.d.ts
files inside the my-module
and my-module/sub-part
folder of the published npm package, so we can import my-module
and my-module/sub-part
separately.在最简单的情况下,您只需在已发布的 npm package 的
my-module
和my-module/sub-part
文件夹中有单独的index.d.ts
文件,因此我们可以导入my-module
和my-module/sub-part
分别地。 Example project directory:示例项目目录:
my-module
| dist
│ index.ts
│ package.json // types prop e.g. could point to dist/index.d.ts
│
└───sub-part
index.ts // compiled to dist/sub-part/index.d.ts
TS makes use of its module resolution process to resolve my-module
or my-module/sub-part
imports (given no global type declaration like @types
exists). TS 利用其模块解析过程来解析
my-module
或my-module/sub-part
导入(假设不存在像@types
这样的全局类型声明)。 For example, my-module
in import { Foo } from 'my-module'
is resolved like this :例如,
import { Foo } from 'my-module'
my-module
的 my-module 解析如下:
// first, try to find file directly
node_modules/my-module.ts
node_modules/my-module.tsx
node_modules/my-module.d.ts
// look in package.json for types property pointing to a file
node_modules/my-module/package.json // <-- lands here, if "types" prop exists
// look in @types
node_modules/@types/my-module.d.ts
// treat my-module as folder and look for an index file
node_modules/my-module/index.ts
node_modules/my-module/index.tsx
node_modules/my-module/index.d.ts // <-- lands here otherwise
For the sake of completness here, my-module
and my-module/sub-part
could also be defined as separate global module declarations in one containing file, like:为了完整起见,
my-module
和my-module/sub-part
也可以在一个包含文件中定义为单独的全局模块声明,例如:
declare module "my-module" {
const Foo: string
}
declare module "my-module/sub-part" {
const Bar: number
}
Finally, the client code looks like you already pictured:最后,客户端代码看起来就像您已经描绘的那样:
import { Foo } from "my-module";
import { Bar } from "my-module/sub-part";
console.log(Foo)
Hope, it helps.希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.