Question

我看过一个例子，我正在尝试重现它。 name和age在class内添加了services和constructor（可注入）。

我想知道在此处使用class和constructor声明变量之间的区别。任何人都可以帮助我了解不同之处。

除了声明name和age之外，我可以在constructor本身内部声明吗？

这是我的代码：

    import {Component} from 'angular2/core';
    import {CommonService} from './commonService';
    import {commonServiceIndipendent} from './commonSerivceIndipendent';

    @Component({

      selector : 'component1',

      template : `

        <h1>Component 1</h1>
        <input type="text" #message />

        <button (click)="onLog(message.value)" >Component1 - Message </button>

      `,

      providers:[commonServiceIndipendent]

    })

    export class Component1 {

      name:string; //why here?
      age:number; //why here?

//can't i add to constructor? if so how?
      constructor ( 
        private _commonService : CommonService, 
        private _commonServiceIndipendent:commonServiceIndipendent) {}


      //sending to same service. it has other instance in history
      onLog(message:string) {

        this._commonService.log( message );

        this.name = "Arif",
        this.age = 20;

        this.onData();

      }

      onData() {
        this._commonServiceIndipendent.myData(this.name,this.age);
      }

    }

Answer 1

在这种情况下

export class Component1 {

      constructor ( 
        private _commonService : CommonService, 
        private _commonServiceIndipendent:commonServiceIndipendent) {


       }

与此类似

export class Component1 {

      private _commonService : CommonService;
      private _commonServiceIndipendent:commonServiceIndipendent;

      constructor ( 
        _commonService : CommonService, 
        _commonServiceIndipendent:commonServiceIndipendent) {

        this._commonService = _commonService; 
        this._commonServiceIndipendent = _commonServiceIndipendent;

       }

如果您不在构造函数protected，private或public中使用，例如DI，则变量_commonService的范围是你无法从另一个函数中使用的构造函数{ }。

例如：

export class Component1 {

      constructor ( 
        _commonService : CommonService, 
        _commonServiceIndipendent:commonServiceIndipendent) {

          _commonService .... Work
       }

       foo(){

        _commonService ..... Cannot find name '_commonService'.
        this._commonService ..... Property '_commonService' does not exist on type 'yourClass'.  

       }

如果你没有将它分配给另一个具有该类范围的变量，那么你就不能使用this关键字来引用这个变量。

export class Component1 {

  name:string; //why here?
  age:number; //why here?

//can't i add to constructor? if so how?

在没有Angular2的打字稿中，你可以做到这一点：

constructor (name:string, age:number) {}

但是在使用Angular2的打字稿中，Angular2负责在大多数情况下使用DI来实现这一点：

constructor (private _commonServiceIndipendent:commonServiceIndipendent){}

您使用的是providers:[commonServiceIndipendent]。

Angular2: Inject a non @Injectable class

How to use Dependency Injection (DI) correctly in Angular2?

Answer 2

如果您对构造函数之外的字段进行delcare，则它可用于执行静态分析的工具，如linter或autocompletion。

如果在构造函数中添加字段，这些工具需要在构造函数中分析代码流（可能有if，for，...），它可能依赖于构造函数参数如果实际创建了字段。这使得它非常困难，通常不受支持。

声明构造函数之外的字段是一种更加静态的方法，就像编译语言一样。在构造函数中创建它们是一种动态方法，通常在编译语言中不可用。

如果只是用字面值初始化字段，它也更简洁。你甚至可能根本不需要构造函数。

class MyClass {
   startValue:number = 1;
}

还有另一种使用构造函数的方法

class MyClass {
  constructor(private someField:string) {}
}

还会创建private字段（也可能是public）。这种方式也使得该字段以静态分析而闻名，因为该字段是无条件创建的（不依赖于仅在运行时已知的值）

Answer 3

在定义变量时，它们是Component1类的成员，Component1类的任何实例分别具有name和age个公共成员{ {1}}和string类型。

在转换TypeScript之后，无论是在number中还是作为成员声明它们都没有区别。然而，在它被编译之前，您可以从此类的实例访问这些成员。这样您就可以在开发过程中看到错误，例如尝试将constructor的{{1}}设置为与age不同的内容。

Component1

当您将类成员定义为私有时，会出现差异。然后在蒸腾后有差异。

Here's关于TS类的一些文档。

变量声明如何在`class`和`constructor`之间有所不同？

3 个答案: