如何在 ReactJS + Typescript 中应用 IIFE？

Question

我想在 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？

谢谢

Answer 1

But when i run above code i got this error 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;

如何在 ReactJS + Typescript 中应用 IIFE？

How to apply IIFE in ReactJS + Typescript?

reactjs

typescript

iife