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将所有内容都放在原型上

我认为这就是你想要发生的事情。只有当你想要将函数作为回调传递时，它才会产生“这个”问题。传递回调时这是一个众所周知的问题，当这样做是时候担心它。对我而言，感觉就像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);

将Typescript转换为Javascript最佳实践

3 个答案: