TypeScript:在构造函数内部和外部声明变量之间有什么区别?

时间:2016-03-20 12:45:11

标签: javascript typescript

让我们假设我有一个用TypeScript编写的类:

class Messenger { 
    x = 10;
    constructor(){
      this.y = 20;
    }
};

这个版本的JavaScript版本如下:

var Messenger = (function () {
    function Messenger() {
        this.x = 10;
        this.y = 20;
    }
    return Messenger;
}());
;

x和y变量在JavaScript中被编译为相同的东西,这有什么区别?

感谢。

3 个答案:

答案 0 :(得分:2)

这实际上是正确的TypeScript:

class Messenger { 
    x = 10;
    y: number;

    constructor() {
        this.y = 20;
    }
}

您必须声明类的属性(JavaScript中不需要)。 因为它在JavaScript中编译为相同的思想,所以在运行时没有区别。但是在某些情况下,仅x = 10(属性被正确键入数字)比y: number + this.y = 20更容易编写 - 所以如果你有属性的默认值不是来自参数那么你可以用更少的字符来写它。

答案 1 :(得分:0)

它确实编译,但编译器应该给你一个错误信息,y在这里不是类Messenger的一部分:

constructor(){
  this.y = 20;
}

然而,编译器通常会编译而不管错误,除非您在tsconfig.json中将其关闭。但是有一种方法可以在构造函数中声明一个变量,但它不在主体中,而是在参数列表中。像这样:

 constructor(public y: number){}

privatepublic放在他们面前。这样,变量将自动设置为您在构造函数中插入的任何内容,而无需执行this.y = y;。这是一种非常简单的创建变量的方法,您将始终将其插入到构造函数中。

您甚至可以提供一个默认参数,如果您不在构造函数中插入任何参数,该参数将起作用:

 constructor(public y = 20){}

查看this article了解详情。

答案 2 :(得分:0)

最简单的方法,您的代码:

class Messenger { 
    x = 10;
    constructor(){
      this.y = 20;
    }
};

完全一样:

class Messenger {
   x = 10;
   y = 20;
   constructor() { }
}

因为具有相同的含义:

class Greeter {
   greeting: string;
   constructor(message: string) {
      this.greeting: string;
   }
}

要具备的条件:

class Greeter { constructor(greeting: string) }

实际上,您正在执行相同的操作,是在声明一个类属性,如果在构造中将其传递,它将被关联,在其他情况下,它将为undefined。 这是避免TypeScript中不必要代码的正确方法。