2

Learning Typoskript ohne Verwendung und haben eine einfache Winkelservice:Mögliche dieses Typoskript schreiben die Exporte Befehl

interface IBaConfigFactory { 
    dateTimeNow: Date; 
} 

export class BaConfigFactory implements IBaConfigFactory { 
    dateTimeNow: Date; 

    constructor() { 
     this.dateTimeNow = new Date(); 
    } 
} 

angular 
    .module("blogApp") 
    .service("BaConfigFactory", BaConfigFactory); 

Aber die Brower klagt:

baConfigService.ts:6 Uncaught ReferenceError: exports is not defined(anonymous function) @ baConfigService.ts:6 app.ts:48

Von dem, was ich lerne, würde ich Dann brauchen Sie etwas wie Webpack oder CommonJS, damit der Browser die Exporte versteht. Kann ich das neu schreiben, damit ich nicht mit einem Exportbefehl fertig werde? Konzentrieren Sie sich darauf, eine Sache zu einer Zeit zu lernen.

+1

Ich weiß nicht, ob es ein Weg, dies zu tun, ohne 'export' zu verwenden. Es ist einfach, ein Modulsystem mit VS2015 zu integrieren. Die Optionen befinden sich in den Projekteigenschaften unter TypeScript Build> Module system. –

+0

Ich musste require.js in mein Projekt aufnehmen. Setzen Sie meine tsconfig.json auf Ziel es6 und verwenden Sie AMD als Modul-Build-System. Das hat den Trick gemacht – Hoppe

Antwort

1

Sie brauchen keinen Export, wenn Sie Ihre Datei nicht mit einem Modulsystem laden, und wenn Sie Ihren Code nicht in ein Modul/Nameplace einfügen.

Zum Beispiel sollte dies funktionieren:

class MyClass { 
    private x: number; 

    constructor(x: number) { 
     this.x = x; 
    } 

    getX(): number { 
     return this.x; 
    } 

    doit(y: number): number { 
     return this.x * y; 
    } 
} 

function echo(value: any): any { 
    return value; 
} 

(sample.ts)

<html> 
    <head> 
     <script src="example.js"></script> 
     <script> 
      var a1 = new MyClass(10), 
       a2 = new MyClass(43); 

      console.log(echo("hey there!")); 
      console.log(a1.doit(a2.getX())); 
     </script> 
    </head> 
    <body></body> 
</html> 

jedoch export verwenden sollte gut sein, weil es nicht in dem kompilierten js (nur erscheinen soll sicher sein, nicht -m oder --module in der compiler options zu verwenden).

Zum Beispiel diese:

module MyModule { 
    export class MyClass { 
     private x: number; 

     constructor(x: number) { 
      this.x = x; 
     } 

     getX(): number { 
      return this.x; 
     } 

     doit(y: number): number { 
      return this.x * y; 
     } 
    } 

    export function echo(value: any): any { 
     return value; 
    } 
} 

erhält in dieser zusammengestellt:

var MyModule; 
(function (MyModule) { 
    var MyClass = (function() { 
     function MyClass(x) { 
      this.x = x; 
     } 
     MyClass.prototype.getX = function() { 
      return this.x; 
     }; 
     MyClass.prototype.doit = function (y) { 
      return this.x * y; 
     }; 
     return MyClass; 
    }()); 
    MyModule.MyClass = MyClass; 
    function echo(value) { 
     return value; 
    } 
    MyModule.echo = echo; 
})(MyModule || (MyModule = {})); 

(Code in Playground)

Und Sie werden feststellen, dass es nicht export in den kompilierten js sind.
Dazu einfach:

<html> 
    <head> 
     <script src="example.js"></script> 
     <script> 
      var a1 = new MyModule.MyClass(10), 
       a2 = new MyModule.MyClass(43); 

      console.log(MyModule.echo("hey there!")); 
      console.log(a1.doit(a2.getX())); 
     </script> 
    </head> 
    <body></body> 
</html>