代码之家 › 专栏 › 技术社区 › Vincent

Typescript库组织

organization import typescript

0

Vincent · 技术社区 · 7 年前

我刚刚把一个javascript库转换成了typescript。我的问题是我不知道如何组织它。它是一个包含组件的库,每个组件使用不同的类、类型、错误类等。。。一些组件依赖于其他组件。

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

所以我可以这样使用它:

import { MyClassFromComponent1, MyTypeFromComponent2 } from "mylib"

我的第二种方法是导入所有组件,并将它们作为根中的常量导出索引.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"

有没有一个建议的方法来处理这样的案件?那么名称空间呢(我不得不说它仍然让我困惑)。

1 回复 | 直到 7 年前

1

0

Nurbol Alpysbayev 7 年前

今天最好的方法是:

导出简单的函数、类、常量,不要将它们包装在某个对象或类中。所以你的第一个方法 import { MyClassFromComponent1, MyTypeFromComponent2 } from "mylib" 非常好(稍后我将讨论命名空间)。这样你的包就可以被树摇动了,这意味着像Webpack/Parcer这样的捆绑包只能从你的包中提取用户所需要的东西。

main 脚本(由package.json的 主要的 主要的 脚本)。所以从你的包裹里导入东西会像这样:

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

不过,如果你有兴趣的话,我个人的做法是脚本和“./api”文件夹中的所有子文件夹,因此导入将如下所示:

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

我喜欢这种方式,因为它可以让用户清楚地看到包到底暴露了什么。否则,如果 "mylib/feature1" 是可导入的(即是API的一部分)或只是包的内部内容。