在 Typescript 中使用超出范围的函数答案

【问题标题】：Using out of scope functions in Typescript在 Typescript 中使用超出范围的函数
【发布时间】：2012-12-16 15:11:26
【问题描述】：

我认为这已经在某个地方解决了，在某个时候，只是为了我的生活，我不记得了所以这是我的问题：

我正在做一些将加载到现有应用程序中的 javascript 工作。这个应用程序有很多可用的功能，除了我想实际使用的一些功能外，我几乎不知道任何功能。因此，假设我知道 window.srslyUsefulFunction 对我可用，我不太关心将其移植到打字稿定义中。

所以问题是如何在我自己的打字稿文件中使用 window.srslyUsefulFunction 而不为它创建定义？

例子：

class MyClass {
    public MyMethod (id : string) : void {
        // do something 
        var result = window.srslyUsefulFunction(id);
        // do something (with the result)
    }
}

【问题讨论】：

window 是一个全局对象，如果在该范围内声明了 srslyUsefulFunction，您的示例应该可以正常工作。
问题不是真正的窗口对象，而是我的项目中不存在的 srslyUsefulFunction，但在部署此代码时它将可用。我几乎将一些 javascript 作为“组件”添加到现有的黑盒系统中。我正在尝试在我生成的 js 中使用该黑盒方法（当然我不会在本地运行它，因为那肯定会失败）

标签： javascript typescript

【解决方案1】：

您可以将函数添加到Window 接口，然后在您的TypeScript 程序中使用它：

interface Window {
    srslyUsefulFunction(id: number): void;
}

class MyClass {
    doSomething() {
        window.srslyUsefulFunction(1);
    }
}

【讨论】：

这是个好东西，它似乎比 check-if-exists 功能更干净，但老实说，没有办法在 ts 文件中使用未经检查的“常规 javascript”？
@AlexR：除非我遗漏了一些打字稿，否则这个答案只是覆盖了函数，与我正在做的相反。（这实际上是你在 JavaScript 中 polyfill 函数的方式）
您可以在 TypeScript 文件中使用常规 JavaScript，但如果它扩展了 TypeScript 中已经定义的内容，即 window 已被声明为 Window 接口的实现，则不能。如果您使用 window. 的函数 - 即只是将其从全局范围中拉出，您可以使用 declare srslyUsefulFunction: (id: number): void; 甚至是松散简单的 declare srslyUsefulFunction: any;
我选择这个作为我的答案，因为这可能最接近我最终所做的（原型设计归结为同一件事）
这对 TS 初学者来说非常有用。

【解决方案2】：

检查函数是否存在。如果没有，请声明：

if(!window.hasOwnProperty('srslyUsefulFunction')
 || typeof window['srslyUsefulFunction'] !== "function"){
    window['srslyUsefulFunction'] = function(){
        console.log("You're only running a dummy implementation of srslyUsefulFunction here!");
    };
}

【讨论】：

这在 TypeScript 中仍然不起作用，因为您仍然会收到关于未定义 window.srslyUsefulFunction 的警告。您必须扩展Window 接口才能清除此错误。
@SteveFenton，那么这种检查函数是否存在的方法怎么样？（typeof window.srslyUsefulFunction !== "function" 仅在存在时才会被检查）
最好的办法是在 TypeScript Playground 上试用您的代码：typescriptlang.org/Playground
@SteveFenton：TypeScript 似乎不知道如何验证这样的案例。呃，我想它必须是类似数组的访问，即使它完全一样，它也会验证。（那个是：window.hasOwnProperty('x') || typeof window.x !== "function"）
我检查了两个解决方案并稍微摆弄了一下，史蒂夫提到的界面解决方案并不像我想象的那样正确，它仍然会给出一些错误，这根本不是很优雅。虽然这对我来说是可行的，因为我正在处理一个少于 200 loc 的单个 js 文件。我将使用上面的代码，实际上我会选择类似：window.prototype.srslyUsefulFunction = new Object();这在有用代码之外的单独文件中。很遗憾不能插入未选中的行

【解决方案3】：

我有简单的解决方法。

在 index.html 中

function playIntro() {
        intro = new lib.intro();
        onlinePlayer.contentContainer.addChild(intro);
        stage.update();
    }

在我的 Main.ts 中我这样称呼它：

private onClick(event): void {

        if (window.hasOwnProperty('playIntro')) {
            window['playIntro'].call();
        }
    }

所以...如果你想从全局范围调用“盲”js函数，只需使用window[“foo”].call();

【讨论】：

这是黄金。它非常“干净”地集成在一起。这是一个彻头彻尾的肮脏黑客，所以为什么不在黑客中添加另一个黑客！
我有一个错误：Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins
如果条件可以是 if ( Object.prototype.hasOwnProperty.call(window, 'playIntro') ) {;但我无法毫无错误地调用该方法：元素隐式具有“任何”类型，因为索引表达式不是“数字”类型； window['playIntro'].call();