टाइपस्क्रिप्ट - उसे यह होना चाहिए? (जहां यह == वैश्विक दायरा)

Question

मैं टाइपस्क्रिप्ट का उपयोग करने के लिए एक कोणीय ऐप को परिवर्तित कर रहा हूं, लेकिन यह एक सामान्य टाइपस्क्रिप्ट प्रश्न है, कोणीय के बारे में नहीं। कोणीय जे एस फ़ाइलें पंक्तियों के साथ कर रहे हैं:

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

और मैं परिवर्तित कर दिया है कि सुंदर टाइपप्रति वर्ग वाक्यविन्यास के लिए:

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

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

सभी, ठीक काम करता है उत्पन्न जे एस को छोड़कर जे एस के अनुसार लिपटे नहीं है मॉड्यूल पैटर्न (यानी बाहरी अज्ञात फ़ंक्शन में):

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

var app = angular.module('myModule', []); 

तो मेरा नियंत्रक अब वैश्विक है। अगर मैं एक टाइपप्रति मॉड्यूल में वर्ग शब्दों में कहें, तो js एक वैश्विक चर के रूप में मॉड्यूल का नाम के साथ उत्पन्न करता है:

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

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

मैं टाइपप्रति इस तरह से वैश्विक क्षेत्र प्रदूषण को कैसे रोकूं? मैं सिर्फ यह सब एक अच्छा स्थानीय दायरे में लपेटा चाहता हूँ। मैंने इसे कहीं और कहा है "बस पुराने जेएस सिंटैक्स पर वापस जाएं" (यानी कोई टाइपस्क्रिप्ट क्लास नहीं)। How can I define an AngularJS service using a TypeScript class that doesn't pollute the global scope?

लेकिन टाइपस्क्रिप्ट/है/कक्षा वाक्यविन्यास का उपयोग करके हम का पूरा बिंदु। टाइपस्क्रिप्ट किसी भी (समझदार) जेएस प्रोग्रामर के साथ बाधाओं पर है जो वैश्विक नहीं जाना जानता है?

Answer 1

आप बस मॉड्यूल में ही वैश्विक होगा एक module

के अंदर अपने वर्ग लपेट कर सकते हैं, लेकिन अगर आप वर्ग निर्यात नहीं है, वहाँ एक भी मॉड्यूल का नाम के साथ वैश्विक गुंजाइश प्रदूषण के बारे में थोड़ा चिंता है।

तो यह टाइपप्रति:

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

निम्नलिखित जे एस का उत्पादन होगा:

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

Answer 2

त्वरित अपडेट

टाइपप्रति के नवीनतम संस्करण में आप यह कर सकते हैं घोंसला एक Iife अंदर एक वर्ग:

(() => { 
    class Example { 

    } 
})(); 

जिसके परिणामस्वरूप उत्पादन होता है:

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

मूल उत्तर

आप टी को जोड़ने से बच सकते हैं वह एएमडी या कॉमनजेएस जैसे मॉड्यूल पैटर्न का उपयोग करके वैश्विक दायरा। जब आप इनमें से किसी एक का उपयोग करते हैं, तो प्रत्येक टाइपस्क्रिप्ट फ़ाइल को बाहरी मॉड्यूल माना जाता है और इसे वैश्विक दायरे से बाहर रखा जाता है।

यह उदाहरण उदाहरण के प्रयोजनों के लिए कोणीय को हटा देता है, लेकिन जब RequJS define विधि को वैश्विक रूप से जोड़ता है, तो आपके किसी भी कोड को इस दायरे में नहीं रखा जाता है।

MyModule.ts

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

app.ts

import MyModule = require('MyModule'); 

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

एचटीएमएल

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

क्या app.js लगता है:

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

वैकल्पिक रूप से ... जैसा कि आप जानते हैं ... आप अभी भी जावास्क्रिप्ट का उपयोग कर इसे लागू कर सकते हैं, यदि आप चाहें तो पहले से ही उपयोग कर रहे हैं - आपको अभी भी ऑटो-पूर्णता और टाइपिंग जांच मिल जाएगी, जो कि प्रमुख लाभ हैं, भले ही आप ' कक्षाएं नहीं मिल रही है।

Answer 3

जोश सही है। मॉड्यूल का प्रयोग करें। साथ ही, शायद गड़बड़ी या गल्प यूग्लीफायर का उपयोग करना एक अच्छा विचार है जिसमें आपके पूरे एप्लिकेशन को बिल्ड समय पर बंद करने में एक विकल्प है।

यह आपके प्रश्न का उत्तर नहीं है, लेकिन एक सुझाव है।

एक तरफ ध्यान दें पर, नियंत्रक

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); 

} 

इस वाक्य रचना आप controllerAs वाक्य रचना का प्रयोग करेंगे के साथ साथ के लिए इस वाक्य पर विचार करें।

Answer 4

बस के रूप में जावास्क्रिप्ट में, आप पूरी तरह से नाम स्थान प्रदूषण एक तुरंत लागू समारोह अभिव्यक्ति के अंदर अपने घोषणाओं लपेटकर द्वारा बच सकते हैं।

तो मूल जावास्क्रिप्ट:

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

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

ध्यान दें कि यह आसपास के दायरे में कोई नाम का परिचय:

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

निम्नलिखित टाइपप्रति हो जाता है। असल में, मूल जावास्क्रिप्ट पूरी तरह से टाइपस्क्रिप्ट मान्य है, लेकिन यह टाइपस्क्रिप्ट का लाभ नहीं लेता है। यह भी ध्यान दें कि मैंने शैली के लिए थोड़ा संपादित किया है।

किसी भी दर पर, यदि आप मॉड्यूल लोडर जैसे मॉड्यूल लोडर के साथ मॉड्यूल का उपयोग नहीं कर रहे हैं जैसे कि RequJS, SystemJS, या आपके पास क्या है, तो आप अभी भी कोशिश किए गए और सही आईआईएफई पैटर्न का पालन करके नेमस्पेस प्रदूषण से बच सकते हैं। यह मेरी सिफारिश है।