演練爲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的粉絲，願意將我指向我無法找到的文章或提供他們自己的回覆。

謝謝， 戴夫Gerding

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 santized。

揭示模塊模式（用於創建對象）

您的JS：

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

    var somePublicFunction = function(e) { }; 

    return { 
     somePublicFunction: somePublicFunction 
    } 
}; 

是完全有效的TS，只是更多的類型安全由於打字稿類型推斷：

同對於你的單身人士來說，它的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