如何在 ReactJS + Typescript 中应用 IIFE？答案

【问题标题】：How to apply IIFE in ReactJS + Typescript?如何在 ReactJS + Typescript 中应用 IIFE？
【发布时间】：2019-04-27 17:03:18
【问题描述】：

我想在 ReactJS + Typescript 环境中使用 IIFE。所以我用 ReactJS + Typescript 重写了这段代码

IIFE

(function() { 
        //Constructor
        this.Radio = function(){ 

            var defaults = { 
                locale: "en-US", 
            }

        } 

        // Public Methods   
        Radio.prototype.load = function() { 

        } 
      }());

ReactJS + Typescript

    export default class Radio{
    options: any = { 
        locale: "en-US", 

    };
    constructor(props: any) {
        var defaults = { 
            locale: "en-US", 
        }

    }       

    // Public Methods   
    load = () => { 
    }
}

我试图实现的是，当 bundle.js 从 html 页面加载时，我可以通过传递一些值来实例化，如下所示

<script src="main.js"></script>
<body> 


    <div id="app"></div>

</body> 

<script>
    $(function() {
        var test = new Radio({   <----error on this line         
            locale: "en-US",            
        });
        test.load();
    });
</script>

但是当我运行上面的代码时，我得到了这个错误Uncaught ReferenceError: Radio is not defined

可以像上面那样实现 IIFE 吗？

谢谢

【问题讨论】：

标签： reactjs typescript iife

【解决方案1】：

但是当我运行上面的代码时，我得到了这个错误 Uncaught ReferenceError: Radio is not defined

如果您希望这个旧代码仍然有效，您需要像以前一样在上面输入Radio。例如。

 export default class Radio{
    options: any = { 
        locale: "en-US", 

    };
    constructor(props: any) {
        var defaults = { 
            locale: "en-US", 
        }

    }       

    // Public Methods   
    load = () => { 
    }
} 

// ADD
(window as any).Radio = Radio;

【讨论】：

这条线是什么意思？添加后我仍然有同样的错误
再试一次window as any?
表示“导出到全局”，因此可以在所有脚本标签中使用?
第一行是“export as a module”。
最后一行是“export as global”