將Typescript轉換為Javascript最佳做法

Question

您如何建議我將此JavaScript轉換為TypeScript？

JAVASCRIPT：

function MyClass() {
    var self = this,
        var1 = "abc",
        var2 = "xyz";

    // Public
    self.method1 = function () {
       return "something " + self.var1;
    };

    self.method2 = function (parm1) {
        var x = self.method1();
        return x + " something";
    };

    // Private 
    function func1(parm1, parm2) {
        return parm1 + parm2;
    }
}

這是我想在TypeScript中執行的操作，或者至少是我希望編寫的方式：

module MyNamespace {
    export class MyClass {

        private var1: string = "abc";
        private var2: string = "xyz";

        constructor() {
        }

        // Public
        public method1() {
            return "something " + self.var1;
        }
        public method2(parm1) {
            var x = this.method1();
            return x + " something";
        }

        // Private 
        private func1(parm1, parm2) {
            return parm1 + parm2;
        }
    }
}

但是生成的JavaScript將所有內容都放到了原型上，我將遇到一些“此”作用域問題：

var MyNamespace;
(function (MyNamespace) {
    var MyClass = (function () {
        function MyClass() {
            this.var1 = "abc";
            this.var2 = "xyz";
        }
        // Public
        MyClass.prototype.method1 = function () {
            return "something " + this.var1;
        };
        MyClass.prototype.method2 = function (parm1) {
            var x = this.method1();
            return x + " something";
        };

        // Private
        MyClass.prototype.func1 = function (parm1, parm2) {
            return parm1 + parm2;
        };
        return MyClass;
    })();
    MyNamespace.MyClass = MyClass;
})(MyNamespace || (MyNamespace = {}))

我知道我可以在構造函數中聲明方法，使用lambda函數獲取“ _this”而不是“ this”，等等。但是“移植到TypeScript”的最佳實踐是什么？

Answer 1

但是生成的Javascript將所有內容都放在了原型上

我認為這就是您想要發生的事情。 它唯一創建“ this”問題的時間是當您要將函數作為回調傳遞時。 在傳遞回調時，這是一個已知的問題，而這樣做正是為此而擔心的時候。 在我看來，這就像JavaScript的方式，最好是擁抱系統而不是與之抗爭。

如果每個實例都有一個獨特的函數閉包，則您將使用更多的內存，或者至少需要為優化器創建更多的工作。

Answer 2

我認為您在那里的移植看起來不錯。 由於內存，性能和可重用性的原因，您應該考慮讓類方法保留在原型上。 但如果你有你真的想成為實例保持的目的，一些方法this ，你可以使用成員初始化+ lambda語法：

class MyClass {
    greeting = 'hello, ';

    /** someFunc is safe to use in callback positions */
    someFunc = (msg: string) => {
        console.log(this.greeting + msg);
    }
}

Answer 3

JavaScript的決定價值this打電話時/調用方法，而不是當你聲明它。 https://stackoverflow.com/a/16063711/1641941 （在“此變量”下）

要設置正確的上下文，您可以使用=>

class MyClass {
    greeting = 'hello, ';
    someFunc(msg: string) {
        console.log(this.greeting + msg);
    }
}

var m = new MyClass();
setTimeout(() => {m.someFunc("hello")},100);

setTimeout將傳遞在當前范圍內創建的閉包。

如果要設置時間間隔或事件處理程序，並且當前作用域中有一個非常大的不相關變量，那么最好聲明一個函數，該函數將閉包返回到當前作用域之外的某個地方，並僅將其傳遞給與該關閉有關。

將為您返回關閉函數並限制范圍的代碼：

class MyClass {
    greeting = 'hello, ';
    someFunc(msg: string) {
        console.log(this.greeting + msg);
    }
    public static closures ={
        someFunc(me:MyClass,msg:string){
            return function(){
                me.someFunc(msg);
            };
        }
    }
}

var m = new MyClass();
setTimeout(MyClass.closures.someFunc(m,"hello"),100);