javascript - Typescript es6 模块重新导出可变变量绑定(bind)

标签 javascript typescript ecmascript-6

我正在尝试使用 es6 模块语法重新导出变量,然后更改它并查看最终导入中反射(reflect)的更改。但它没有按预期工作。请参见下面的示例:

a.ts

export var a = 1;
export function changeA() { a = 2; }

b.ts

export * from './a';

c.ts

import { a, changeA } from './b';
console.log(a); // 1
changeA();
console.log(a); // Expected 2 but get 1

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out"
  }
}

运行结果:

$ node out/c.js
1
1

我希望最终的 console.log 打印 2 以反射(reflect)更新,但事实并非如此。但是,如果我用 babel 编译相同的示例,它就可以工作。重新导出可变变量绑定(bind)是否根本不适用于 typescript ,或者我只是做错了什么?

最佳答案

是因为b.ts:

export * from './a';

转译为

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require('./a'));

并且变量 a 的值被复制而不被引用。

你可以这样解决:

a.ts:

export var a = 1;
export var deeper = {
    a: 1
};
export function changeA() {
    a = 2;
    deeper.a = 2;
}

b.ts:

export * from './a';

c.ts:

import { a, deeper, changeA } from './b';
console.log(a); // 1
changeA();
console.log(a); // Expected 2 but get 1
console.log(deeper.a); // prints 2 as expected

关于javascript - Typescript es6 模块重新导出可变变量绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34611219/

相关文章:

javascript - 如何使用 ES6 样式导入添加外部 javascript 库?

php - Symfony 使用 javascript 国际化

javascript - 从其他可观察对象切换 Rxjs 流

typescript - 在 TypeScript 中推断接口(interface)属性类型

javascript - 解构第一个数组项或如何强制 Mongoose 返回对象而不是单项数组

javascript - 这段代码在 ES6 中的转置是什么?

javascript - BIRT 记录数据集的 onFetch 步骤

typescript 错误 : Getter-only property not defined in literal

javascript - 导入的 typescript 类的实例化似乎不起作用

javascript - 尝试更好地理解 let 与 var