Question

我刚将一个JavaScript库转换为打字稿。我的问题是我不知道如何组织它。这是一个包含组件的库，每个组件使用不同的类，类型，错误类等。某些组件依赖于其他组件。

我最初的方法是在根目录下导出所有内容。

export * from "./component1";
export * from "./component2";
export * from "./component3";

所以我可以这样使用它：

import { MyClassFromComponent1, MyTypeFromComponent2 } from "mylib"

可以使用，但是它们都在同一个地方，并且具有IDE和自动补全功能，有点混乱。

第二种方法是导入所有组件，并将每个组件导出为根索引中的一个常量。ts

import * as _component1 from "./component1";
import * as _component2 from "./component2";
import * as _component3 from "./component3";

export const component1 = _component1;
export const component2 = _component2;
export const component3 = _component3;

我能够这样使用它：

import component1 from "mylib"

const { MyClass1 } = component1;

但是通过这种方式，我无法导入打字稿类型，也无法进行导入解构（例如，命名导入当然不支持）

import { component1: { MyClassComponent1 } } from "mylib"

是否有建议的方式来处理类似案件？命名空间又如何呢（我不得不说它仍然让我感到困惑）。

Answer 1

今天最好的方法是：

按原样导出简单的函数，类，常量，而不将其包装在某些对象或类中。因此，您的第一种方法import { MyClassFromComponent1, MyTypeFromComponent2 } from "mylib"很好（我将在以后讨论命名空间）。这样，您的软件包就可以摇树，这意味着像Webpack / Parcer这样的捆绑程序只能从您的软件包中提取用户的确切需求。
避免默认导出。坦白地说，我忘记了为什么，但这是当今的惯例。

关于命名空间。常见的方法是在main脚本（由package.json的main字段定义）中具有主要功能，类和其他可导出内容。通常将任何其他内容放在其自己的子文件夹中（此子文件夹与main脚本位于同一位置）。因此，从包中导入内容如下所示：

import {importantFunc, importantComponent} from "mylib"
import {secondaryStuff} from "mylib/feature1"

但是，如果您感兴趣的话，我的个人方法是将main脚本和所有子文件夹放在“ ./api”文件夹中，以便导入看起来像这样：

import {importantFunc, importantComponent} from "mylib/api"
import {secondaryStuff} from "mylib/api/feature1"

我喜欢这种方式，因为它使用户可以清楚地看到包装所公开的内容。否则，用户可能不确定"mylib/feature1"是否可导入（即是API的一部分）还是仅仅是包的内部内容。

打字稿库组织

1 个答案: