Пошаговое руководство по преобразованию объектов Javascript в эквиваленты машинописных имен?

Question

Я устал от капризов JavaScript, чтобы серьезно подумать о переносе относительно большого проекта на машинописный. Я видел обучающие материалы и получал суть Typcript, но, признаюсь, было бы очень полезно, если бы я увидел несколько примеров «до» и «после» перехода от JavaScript к TypScript. В частности, преобразование из нескольких популярных шаблонов определения объектов, которые я использовал (плохо) в JS. Например, если у меня есть объект JS объявлен как это:

var app = app || {}; 

app.SomeSingleton = function() { 

var someProp; 

var someFunction = function(e) { 

}; 

var somePublicFunction = function(e) { 

}; 

return { 
    somePublicFunction: somePublicFunction 
} 

}(); 

Даже просто набрав на это помогает мне видеть, что я, вероятно, просто перекодировать свойство свойством и методом методом ... но странно (для меня) inline class definition stuff в 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, желает указать мне на статьи, которые я не смог найти или предоставить их собственный ответ.

Спасибо, Dave 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 = {})); 

Просто более santized, чем сырые JS.

Раскрывая шаблон модуля (для создания объектов)

Вашего JS:

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

    var somePublicFunction = function(e) { }; 

    return { 
     somePublicFunction: somePublicFunction 
    } 
}; 

вполне допустим TS, только более типизированный из-за вывод типа машинописных:

Same для вашего синглтона, его хороший Тип:

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