打字稿：如何从浏览器控制台访问功能

Question

语境

中ts/app.ts，有：

function foo() {

    console.log('Hello Word');

}

它使用 Webpack 成功编译bundle.js并加载：

<script src="dist/bundle.js"></script>

问题

如何foo从我的浏览器控制台执行？

> foo()

Uncaught ReferenceError: foo is not defined

Answer 1

正如您拥有的那样，您无法在全球范围内访问它。但如果你愿意，你可以做到function foo() {&nbsp; &nbsp; console.log('Hello Word');}(window as any).foo = foo;然后它应该在对象上可用window（这意味着您可以访问它或者window.foo()因为foo()该window对象是全局对象。默认情况下，诸如此类的变量和方法foo对于它们所在的模块（即文件）是私有的。您可以像这样导出它们：export function foo() {&nbsp; &nbsp; console.log('Hello Word');}这意味着您可以从其他模块导入它们，即import {foo} from "foo";foo();但是浏览器本身不理解那个import和export语法 (*) 所以它们仍然不是全局的。是 webpack 理解该语法并将它们全部拼接成浏览器可以使用的形式（在您的“dist/bundle.js”文件中）。查看该文件，您将看到 webpack 插入的引导程序代码。(*) 编辑：浏览器开始支持模块：从本质上讲，没有什么是全局的，但这是一件好事，否则它们可能会相互冲突。即它不会是模块化的。