TypeScript 类 : 构造函数和方法

Question

我试图避免在我的 Typescript 中进行双重声明类。

在我这样写类之前 :

module ModuleName {
    export class ClassName {
        public method: () => void;

        constructor(
            private dependency: any ) {
            this.method = () => {
                dependency.someUse();
            };
        }
    }
}

但是方法类型的声明（此处 public method: () => void;）看起来毫无用处，尤其是当您已经有一个声明它的接口时。所以我想写：

module ModuleName {
    export class ClassName {
        constructor(
            private dependency: any ) { }

        public method = () => {
            this.dependency.someUse();
        };

    }
}

注意：为了避免警告 variable XXX used before declaration，我们必须将方法放在构造函数之后。

但是现在如果我们在构造函数中使用我们的方法，我们会再次收到关于此方法的警告：

module ModuleName {
    export class ClassName {
        constructor(
            private dependency: any ) {
            this.method(); // warning here
        }

        public method = () => {
            this.dependency.someUse();
        };

    }
}

所以，我的问题是：我们应该如何正确地编写类？

注意：由于 typescript 编译器会更正声明的顺序，这没什么大不了的，我只是想知道是否可以在没有双重声明和警告的情况下编写类。

Answer 1

这听起来像是来自 TSLint 的错误。您对使用 WebEssentials 有任何改变吗？

您可能想要禁用此规则，因为从您所说的来看它看起来有问题。 WebEssentials 从您的用户主目录 (%userprofile%) 加载 tslint.json。您应该能够在那里找到 tslint.json 文件。这是您可以 enable/disable 规则的地方。

听起来下面的规则有错误

no-use-before-declare disallows usage of variables before their declaration`

您可以通过添加（或更改）配置来禁用此规则：

"no-use-before-declare": false

有关 tslint 及其规则的更多信息可在此处找到：https://github.com/palantir/tslint/

Answer 2

您的错误 variable XXX used before declaration 是因为将您的 class 方法声明为 class 属性。

而不是像这样声明你的方法：

public method = () => {

这样声明：

public method() {

所以你的 class 看起来像这样：

module ModuleName {
    export class ClassName {
        constructor(private dependency: any ) { }

        public method() {
            this.dependency.someUse();
        }
    }
}

Answer 3

最后，我认为删除此警告不是一个好主意，因为它在某些情况下可能非常有用。

但我找到了解决问题的方法：如果我们 将构造函数移动到 class 的末尾，我们将不再有警告：

module ModuleName {
    export class ClassName {

        public method = () => {
            this.dependency.someUse();
        };

        constructor(
            private dependency: any ) {
            this.method();
        }

    }
}

如果我们查看生成的 JS，更容易理解发生了什么：构造函数的参数仍然放在生成函数的开头：

var ModuleName;
(function (ModuleName) {
    var ClassName = (function () {
        function ClassName(dependency) {
            var _this = this;
            this.dependency = dependency;
            this.method = function () {
                _this.dependency.someUse();
            };
            this.method();
        }
        return ClassName;
    })();
    ModuleName.ClassName = ClassName;
})(ModuleName || (ModuleName = {}));

TypeScript 类 : 构造函数和方法

TypeScript classes : constructor and method

javascript

typescript