Question

在TS中，我有 class.ts 的 Class1 ，一些 helper.ts 的函数，一些来自变量的变量。 ts ：

例如， variables.ts 看起来像这样：

export const test1 = 'test1';
export const test2 = 0;
export const test3 = 'test3';
export const test4 = 'test4';

然后使用Webpack，给api.ts像条目一样来构建模块。

api.ts

export { Class1 } from './class1';
export { helper1, helper2 } from './helper';
export * from './variables';

像这样，在我的Web应用程序中，在JS中，我从该模块中导入所需的内容。但是，不要像这样导入每个变量：

import { test1, test2, test3, test4 } from 'api';

我想知道是否可以导入如下内容：

import { variables } from 'api';
test1 = variables.test1;

或类似的东西：

import { variables.test1, variables.test3} from 'api';

我应该在TS中进行哪些更改？

Answer 1

只需使用一个名为variables的包装对象：

export const variables = {
  test1: 'test1',
  test2: 0,
  test3: 'test3',
  test4: 'test4'
};

Answer 2

我建议将所有变量导入为模块命名空间对象，然后导出该对象：

import * as variables from './variables';
export { variables };

另请参见：来自Mozilla的this article中的“模块名称空间对象”。

Answer 3

这是RXJS解决此问题的方式：

https://github.com/ReactiveX/rxjs/blob/master/src/internal/umd.ts

api.ts

export { Class1 } from './class1';
export { helper1, helper2 } from './helper';

import * as _variables from './variables';
export const variables = _variables;

Answer 4

要完成Jack Bashfor的回答，我建议export default

// variables.js
export default const variables = {
  test1: 'test1',
  test2: 0,
  test3: 'test3',
  test4: 'test4'
};


// file.js
import nameYouWant from 'variables'
consol.log(nameYouWant.test1);
// ...

一口气导出多个变量

4 个答案: