Typescript：如何从浏览器控制台访问功能

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() {
    console.log('Hello Word');
}

(window as any).foo = foo;

那么它应该在window 对象上可用（这意味着您可以以window.foo() 或只是foo() 访问它，因为window 对象是全局对象。

变量和方法如foo 是它们默认所在的模块（即文件）私有的。您可以像这样导出它们：

export function foo() {
    console.log('Hello Word');
}

这意味着您可以从其他模块导入它们，即

import {foo} from "foo";
foo();

但是浏览器本身不理解 import 和 export 语法 (*) 所以它们仍然不是全局的。是 webpack 理解语法并将它们拼接成浏览器可以使用的形式（在你的“dist/bundle.js”文件中）。看看那个文件，你会看到 webpack 插入的引导代码。

(*) 编辑：Browsers are starting to support modules:

基本上，没有什么是全局的，但这是一件好事，否则它们可能会相互冲突。也就是说，它不会是模块化的。