TypeScript - sie muss es haben? (wo es == globaler Gültigkeitsbereich)

Question

Ich konvertiere eine Angular App, um TypeScript zu verwenden, aber das ist eine allgemeine TypeScript-Frage, nicht über Angular. Die Winkel js Dateien sind entlang der Linien:

(function() { 
    var app = angular.module('myModule', []); 
    app.controller('myController', ['$scope', 
    function ($scope) { 
     $scope.myNewProperty = "Bob"; 
    } 
    ]); 
})(); 

Und ich habe umgewandelt, das zu schönen Typoskript Klasse Syntax:

class myController { 
    constructor($scope) { 
     $scope.myNewProperty = "Bob"; 
    } 
} 

angular.module('myModule', []).controller("myController", myController); 

Alle funktioniert gut, mit Ausnahme der erzeugte JS wird nach dem JS nicht umgebrochen Modulmuster (dh in einer äußeren anonymen Funktion):

So myController ist jetzt global. Wenn ich die Klasse in einem Typoskript Modul setzen, dann erzeugt die js mit dem Modulnamen als globale Variable:

var TsModule; 
(function (TsModule) { 
    var myController =  (function() { 
      app.controller('myController', ['$scope', 
      function ($scope) { 
       $scope.myNewProperty = "Bob"; 
      } 
      ]); 
     })(); 

    var app = angular.module('myModule', []); 
})(TsModule || (TsModule = {})); 

Wie verhindere ich, Typoskript den globalen Bereich auf diese Weise umweltfreundlich? Ich will nur, dass alles in einem netten lokalen Rahmen verpackt ist. Ich habe gesehen, dass es an anderer Stelle sagte "einfach zurück zu der alten JS-Syntax" (d. H. Keine TypeScript-Klasse). How can I define an AngularJS service using a TypeScript class that doesn't pollute the global scope?

Aber der ganze Sinn von uns mit TypeScript/ist/die Klassensyntax. Ist TypeScript im Widerspruch zu irgendeinem (vernünftigen) JS-Programmierer, der nicht global sein will?

Answer 1

Sie können einfach wickeln Sie Ihre Klasse in einem module

Das Modul selbst global sein wird, aber wenn Sie die Klasse nicht exportieren, gibt es wenig Sorge über die globale Reichweite mit einem einzigen Modulnamen zu verschmutzen.

Also das Typoskript:

module MyModule { 
    class MyClass { 
    constructor(){} 
    } 
} 

wird die folgende JS produzieren:

var MyModule; 
(function (MyModule) { 
    var MyClass = (function() { 
     function MyClass() { 
     } 
     return MyClass; 
    })(); 
})(MyModule || (MyModule = {})); 

Answer 2

Quick Update

In den neuesten Versionen von Typoskript Sie können Nest eine Klasse innerhalb eines IIFE:

(() => { 
    class Example { 

    } 
})(); 

Die resultierende Ausgabe ist:

(function() { 
    var Example = (function() { 
     function Example() { 
     } 
     return Example; 
    }()); 
})(); 

Original-Antwort

Sie können vermeiden, zu t hinzuzufügen Der globale Gültigkeitsbereich verwendet ein Modulmuster wie AMD oder CommonJS. Wenn Sie eine dieser beiden Typen verwenden, wird jede TypScript-Datei als externes Modul betrachtet und nicht im globalen Gültigkeitsbereich.

In diesem Beispiel wird Angular für die Zwecke des Beispiels entfernt, aber während RequireJS die Methode zu global hinzufügt, wird keiner Ihrer Codes in diesem Bereich platziert.

MyModule.ts

export class myController { 
    constructor($scope) { 
     $scope.myNewProperty = "Bob"; 
    } 
} 

app.ts

import MyModule = require('MyModule'); 

var controller = new MyModule.myController(''); 

HTML

<script src="Scripts/require.js" data-main="app.js"></script> 

Was app.js wie folgt aussieht:

define(["require", "exports", 'MyModule'], function (require, exports, MyModule) { 
    var controller = new MyModule.myController(''); 
}); 

Alternativ ... wie Sie wissen ... können Sie es immer noch mit dem JavaScript, das Sie bereits verwenden, implementieren, wenn Sie möchten - Sie erhalten immer noch eine automatische Vervollständigung und Typprüfung, was große Vorteile sind, auch wenn Sie nicht t Klassen bekommen.

Answer 3

Josh ist richtig. Verwenden Sie das Modul. Außerdem ist es wahrscheinlich eine gute Idee, den Grunt- oder Schluck-Heller zu verwenden, der eine Option hat, um Ihre gesamte Anwendung zum Zeitpunkt der Erstellung in eine Schließung zu verpacken.

Dies ist keine Antwort auf Ihre Frage, sondern eher ein Vorschlag.

Auf einer Seite zur Kenntnis, sollte mit dieser Syntax diese Syntax für Controller

module myModule { 

    // We export the class so that we can access its interface in tests. 
    // The build time gulp or grunt uglify will wrap our app in a closure 
    // so that none of these exports will be available outside the app. 
    export class MyController { 

     myNewProperty = "bob"; 

     // Next we will use Angulars $inject annotation to inject a service 
     // into our controller. We will make this private so that it can be 
     // used internally. 
     static $inject = ['someService']; 
     constructor(private someService: ng.ISomeService) {} 

     // we can access our class members using 'this' 
     doSomething() { 
      this.someService.doSomething(this.myNewProperty); 
     } 

    } 

    angular.module('app').controller('MyController', MyController); 

} 

Zusammen Sie die controllerAs Syntax verwenden würden.

Answer 4

Genau wie in JavaScript können Sie die Verunreinigung von Namensräumen vollständig vermeiden, indem Sie Ihre Deklarationen in einen sofort aufgerufenen Funktionsausdruck einfügen.

So das ursprüngliche JavaScript:

(function() { 
    var app = angular.module('myModule', []); 
    app.controller('myController', ['$scope', 
    function ($scope) { 
     $scope.myNewProperty = "Bob"; 
    } 
    ]); 
})(); 

wird die folgende Typoskript:

(function() { 
    class MyController { 
    static $inject = ['$scope']; 
    contructor($scope: ng.IScope & { myNewProperty: string }) { 
     $scope.myNewProperty = 'Bob'; 
    } 
    } 

    angular.module('myModule', []) 
    .controller('MyController', MyController); 
})(); 

Beachten Sie, dass dies keine Namen in den umgebenden Rahmen einführt. Eigentlich ist das ursprüngliche JavaScript ein perfekt gültiges TypeScript, nutzt aber TypeScript nicht aus. Beachten Sie auch, dass ich für Stil leicht bearbeitet habe.

Wenn Sie keine Module mit einem Modulladeprogramm wie RequireJS, SystemJS oder was auch immer verwenden, können Sie auf jeden Fall die Namensraumverschmutzung vermeiden, indem Sie dem bewährten IIFE-Muster folgen. Das ist meine Empfehlung.