1

你会如何推荐我将此 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 将所有内容都放在原型上，我将遇到一些“this”范围问题：

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”的最佳实践是什么？

4

3 回答 3

4

但是生成的 Javascript 将所有内容放在原型上

我认为这就是你想要发生的事情。它创建“this”问题的唯一时间是当您想要将函数作为回调传递时。在传递回调时这是一个已知的问题，而这样做是担心它的正确时机。对我来说，这感觉就像 JavaScript 的方式，最好拥抱这个系统而不是对抗它。

如果每个实例都有一个独特的函数闭包，那么您将使用更多内存或至少为优化器创建更多工作。

于 2013-11-07T16:46:47.160 回答
3

我认为你在那里的移植看起来是对的。出于内存、性能和可重用性的原因，您应该考虑让类方法保留在原型上。但是如果你有一些方法你真的想在实例上保存this，你可以使用成员初始化 + lambda 语法：

class MyClass {
    greeting = 'hello, ';

    /** someFunc is safe to use in callback positions */
    someFunc = (msg: string) => {
        console.log(this.greeting + msg);
    }
}
于 2013-11-07T16:41:03.310 回答
3

thisJavaScript在调用/调用方法时确定值，而不是在您声明它时确定。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);
于 2013-11-07T17:42:56.700 回答