【问题标题】:TypeScript export usageTypeScript 导出使用
【发布时间】:2021-10-14 04:11:14
【问题描述】:

我编写了一些 TypeScript 代码,想将其用作一个包,但我无法准备导出和导入语法。有没有人可以帮助我达到我的方法?您可以在下面的图片中看到我的定义

如何将我的函数组合在一个命名空间或类中以达到预期的导入语句。您可以分叉和编辑我的代码。 感谢您的建议。

我的实际实现

import {
  utilAFunction1,
  utilAFunction2,
  utilBFunction1,
  utilBFunction2
} from './src/utils';

utilAFunction1();
utilAFunction2();

utilBFunction1();
utilBFunction2();

我的预期实现

import { utils } from './src/utils';

utils.utilAFunction1();
utils.utilAFunction2();

utils.utilBFunction1();
utils.utilBFunction2();

我的项目文件结构也是

src
 utils
  util-a
   index.ts
  util-b
   index.ts
  index.ts
index.ts
// util-a > index.ts
export function utilAFunction1(): void {
  console.log('Util A function 1');
}

export function utilAFunction2(): void {
  console.log('Util A function 2');
}
// util-b > index.ts
export function utilBFunction1(): void {
  console.log('Util B function 1');
}

export function utilBFunction2(): void {
  console.log('Util B function 2');
}
// utils > index.ts
import { utilAFunction1, utilAFunction2 } from './util-a';
import { utilBFunction1, utilBFunction2 } from './util-b';

export { utilAFunction1, utilAFunction2, utilBFunction1, utilBFunction2 };
// src > index.ts
import {
  utilAFunction1,
  utilAFunction2,
  utilBFunction1,
  utilBFunction2
} from './src/utils';

utilAFunction1();
utilAFunction2();

utilBFunction1();
utilBFunction2();

/*
// my expected import statement and usage
import { utils } from './src/utils';

utils.utilAFunction1();
utils.utilAFunction2();

utils.utilBFunction1();
utils.utilBFunction2();

*/

StackBlitz page

【问题讨论】:

  • 我添加了更多代码示例,在提问时我忘了添加它们,感谢警告

标签: typescript module export


【解决方案1】:

我的预期实现

import { utils } from './src/utils';

utils.utilAFunction1();
utils.utilAFunction2();

utils.utilBFunction1();
utils.utilBFunction2();

如果不必完全正确 import { utils } from...,您可以在不更改utils 的情况下执行此操作:

import * as utils from './src/utils';

导入模块的模块命名空间对象,该模块对模块中所有命名导出具有只读属性,并且(如果模块具有默认导出)default 属性用于默认导出。

或者,如果你真的希望它是这样的:

import { utils } from './src/utils';

...那么您可以将其添加到utils:

export const utils = { utilAFunction1, utilAFunction2, utilBFunction1, utilBFunction2 };

但请注意,其上的属性不像模块命名空间对象上那样是只读的,尽管您可以轻松地将它们设为只读:

export const utils = Object.freeze({ utilAFunction1, utilAFunction2, utilBFunction1, utilBFunction2 });

【讨论】:

  • 对于它的价值,我在我最近一本书 JavaScript: The New Toys我>。如果您有兴趣,请在我的个人资料中链接。
  • export const utils = Object.freeze({ utilAFunction1, utilAFunction2, utilBFunction1, utilBFunction2 }); 的使用对我有帮助
猜你喜欢
  • 2018-12-16
  • 2022-07-20
  • 2021-03-15
  • 1970-01-01
  • 2017-11-12
  • 2019-04-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多