将Javascript对象转换为Typescript等价物的演练？

Question

我已经厌倦了JavaScript的变幻莫测，认真考虑将一个相对较大的项目移植到Typescript。我已经看过这些教程并获得了Typescript的要点，但我承认，如果我看到从JavaScript到Typescript的“之前”和“之后”的一些例子，那将会非常有用。特别是，转换了一些流行的对象定义模式，我一直在JS中表现不佳（很差）。例如，如果我有一个JS对象声明如下：

var app = app || {};

app.SomeSingleton = function() {

var someProp;

var someFunction = function(e) {

};

var somePublicFunction = function(e) {

};

return {
    somePublicFunction: somePublicFunction
}

}();

即使只是输入这个也可以帮助我看到我可能只是通过属性和方法按方法重新编码属性...但js中奇怪的（对我来说）内联类定义的东西仍然引发了我的兴趣。那么，与上面相同的问题，当转换为TS时，以下存根将如何看待？

var app = app || {};

app.MVVMThing = (function () {
    "use strict";

    //model
    var MVVMModel = (function () {
        LoggerInstanceDeclaredElsewhere.log("blah");

        var mvvmModel = {

            id: 'Id'

        };

        var datasource = "blah";

        return {
            model: mvvmDatasource
        };
    }());

    // view model
    var MVVMViewModel = (function () {

        var init = function () {

        };

        var show = function () {

        };

        return {
            init: init,
            show: show,           
        };
    }());

    return MVVMViewModel;
}());

我是对的，虽然在JS中有许多类定义和实例化的方言，但在TS中实际上只有一种主要的方法吗？

希望那些喜欢TypeScript的人愿意指出我找不到的文章或提供自己的回复。

谢谢， 戴夫格尔丁

Answer 1

  

JS中的类定义和实例化的许多方言实际上只有一种主要的方法在TS中执行此操作

清除。但是所有有效的JS都是有效的TS，所以你仍然拥有所有这些能力。

模块/命名空间模式

你在这做什么：

var app = app || {};

app.SomeSingleton = function() {
}

正在使用模块模式。与其他语言的命名空间类似。您将前缀app附加到SomeSingleton。在打字稿中：

module app{
    export function SomeSingleton(){} 
}

生成：

var app;
(function (app) {
    function SomeSingleton() {
    }
    app.SomeSingleton = SomeSingleton;
})(app || (app = {}));

比你的原始JS更加狡猾。

显示模块模式（用于创建对象）

你的JS：

var SomeClass = function() {
    var someProp;
    var someFunction = function(e) {    };

    var somePublicFunction = function(e) {    };

    return {
        somePublicFunction: somePublicFunction
    }
};

完全有效的TS，由于TypeScripts类型推断而更加类型安全：

同样适用于你的单身人士，其优秀的TypeScript：

var SomeSingleton = function() {
    var someProp;
    var someFunction = function(e) {    };

    var somePublicFunction = function(e) {    };

    return {
        somePublicFunction: somePublicFunction
    }
} ();

要了解更多信息，请访问Google：https://www.google.com.au/search?q=revealing%20module%20pattern