TypeScript - Modüller

TypeScript ile yazılmış kodu düzenleme fikri ile bir modül tasarlanmıştır. Modüller genel olarak -

Dahili Modüller
Harici Modüller

Dahili Modül

Dahili modüller, Typescript'in önceki sürümlerinde geldi. Bu, sınıfları, arayüzleri, işlevleri bir birimde mantıksal olarak gruplamak için kullanıldı ve başka bir modüle aktarılabilir. Bu mantıksal gruplama, TypeScript'in en son sürümünde ad alanı olarak adlandırılır. Dolayısıyla dahili modüller artık kullanılmıyor, bunun yerine ad alanını kullanabiliriz. Dahili modüller hala desteklenmektedir, ancak ad alanının dahili modüller üzerinde kullanılması önerilir.

Dahili Modül Sözdizimi (Eski)

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

Ad Alanı Sözdizimi (Yeni)

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

Her iki durumda da oluşturulan JavaScript aynıdır

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

Harici Modül

TypeScript'teki harici modüller, birden çok harici ortam arasındaki bağımlılıkları belirtmek ve yüklemek için mevcuttur. jsDosyalar. Sadece bir tane varsajsdosya kullanılırsa, harici modüller ilgili değildir. Geleneksel olarak JavaScript dosyaları arasındaki bağımlılık yönetimi, tarayıcı komut dosyası etiketleri (<script> </script>) kullanılarak yapılırdı. Ancak modülleri yüklerken çok doğrusal olduğu için bu genişletilebilir değildir. Bu, dosyaları birbiri ardına yüklemek yerine, modülleri yüklemek için eşzamansız seçenek olmadığı anlamına gelir. Örneğin NodeJ'ler gibi sunucu için js programlarken, komut dosyası etiketleriniz bile yoktur.

Bağımlıları yüklemek için iki senaryo vardır js tek bir ana JavaScript dosyasından dosyalar.

İstemci Tarafı - RequireJs
Sunucu Tarafı - NodeJs

Bir Modül Yükleyicinin Seçilmesi

Harici JavaScript dosyalarının yüklenmesini desteklemek için bir modül yükleyiciye ihtiyacımız var. Bu başka olacakjskütüphane. Tarayıcı için en yaygın kullanılan kitaplık RequieJS'dir. Bu, AMD (Asynchronous Module Definition) spesifikasyonunun bir uygulamasıdır. Dosyaları arka arkaya yüklemek yerine AMD, birbirlerine bağımlı olsalar bile hepsini ayrı ayrı yükleyebilir.

Harici Modülü Tanımlama

TypeScript'te CommonJS veya AMD'yi hedefleyen harici modül tanımlanırken, her dosya bir modül olarak kabul edilir. Bu nedenle, harici modül ile birlikte dahili modülü kullanmak isteğe bağlıdır.

TypeScript'i AMD'den CommonJs modül sistemlerine geçiriyorsanız, herhangi bir ek çalışma gerekmez. Değiştirmeniz gereken tek şey yalnızca derleyici bayrağıdır JavaScript'in aksine, CommonJ'lerden AMD'ye veya tam tersi geçişte ek yük vardır.

Harici bir modülü bildirmek için sözdizimi, 'dışa aktar' ve 'içe aktar' anahtar kelimesini kullanıyor.

Sözdizimi

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

Bildirilen modülü başka bir dosyada kullanmak için, aşağıda verildiği gibi bir import anahtar sözcüğü kullanılır. Dosya adı yalnızca hiçbir uzantı kullanılmadan belirtilmiştir.

import someInterfaceRef = require(“./SomeInterface”);

Misal

Bunu bir örnek kullanarak anlayalım.

// IShape.ts 
export interface IShape { 
   draw(); 
}

// Circle.ts 
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
} 

// Triangle.ts 
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
   
// TestShape.ts 
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  

function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 

drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

AMD sistemleri için ana TypeScript dosyasını derleme komutu şöyledir:

tsc --module amd TestShape.ts

Derlemede, AMD için aşağıdaki JavaScript kodunu üretecektir.

Dosya: IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

Dosya: Circle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});

Dosya: Triangle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn (external module)");
      };
      return Triangle;
   })();
   exports.Triangle = Triangle;
});

Dosya: TestShape.js

//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

Ana TypeScript dosyasını derleme komutu Commonjs sistemler

tsc --module commonjs TestShape.ts

Derlemede, aşağıdaki JavaScript kodunu oluşturacaktır. Commonjs.

Dosya: Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

Dosya: Triangle.js

//Generated by typescript 1.8.10
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

Dosya: TestShape.js

//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

Çıktı

Cirlce is drawn (external module)
Triangle is drawn (external module)