网站搜索

将 Typescript 转换为 Javascript 的最佳实践


你会建议我如何将这个 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”的最佳实践是什么?

答案#1

但是生成的 Javascript 把所有东西都放在了原型上

我认为那正是你希望发生的情况。唯一会产生“this”问题的情况是当你想将函数作为回调传递时。当传递回调函数时这是一个已知问题,而真正需要担心它的时机就是那时。对我来说,这感觉像是 JavaScript 的方式,比起与之抗争,更好的是接受这个系统。

如果每个实例都有一个独特的函数闭包,你将使用更多的内存,或者至少为优化器创造更多的工作。

答案#2

我认为你那里的移植看起来是正确的。你应该考虑让类方法保留在原型上,以节省内存、提高性能和可重用性。但如果你有一些方法确实希望在实例上,以便保留 this,你可以使用成员初始化 + lambda 语法:

class MyClass {
    greeting = 'hello, ';

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