Typescript 库组织

Question

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

我最初的方法是导出根级别的所有内容。

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

所以我可以这样使用它：

import { MyClassFromComponent1, MyTypeFromComponent2 } from "mylib"

用起来还可以，但是都在同一个地方，还有IDE和自动补全，有点乱。

我的第二种方法是导入所有组件并将它们中的每一个导出为根中的常量index.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

今天最好的方法是：

按原样导出简单函数、classes、常量，而不是将它们包装在某个对象或 class 中。所以你的第一种方法 import { MyClassFromComponent1, MyTypeFromComponent2 } from "mylib" 非常好（我稍后会讨论命名空间）。这样你的包将是 tree-shakeable 的，这仅仅意味着像 Webpack/Parcer 这样的打包器只能从你的包中提取用户确切需要的东西。
避免默认导出。老实说我忘了为什么，但这是现在的惯例。

关于命名空间。常见的方法是在 main 脚本（由 package.json 的 main 字段定义）中仅包含主要功能、classes 和其他可导出文件。任何其他东西通常放在它自己的子文件夹中（这个子文件夹与 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 的一部分）或者它只是包的内部内容。

Typescript 库组织

Typescript library organisation

typescript

import

organization