TypeScript - Modul

Sebuah modul dirancang dengan ide untuk mengatur kode yang ditulis dalam TypeScript. Modul secara luas dibagi menjadi -

  • Modul Internal
  • Modul Eksternal

Modul Internal

Modul internal datang dalam Typecript versi sebelumnya. Ini digunakan untuk secara logis mengelompokkan kelas, antarmuka, fungsi ke dalam satu unit dan dapat diekspor ke modul lain. Pengelompokan logis ini dinamai namespace di TypeScript versi terbaru. Jadi modul internal sudah usang, sebagai gantinya kita dapat menggunakan namespace. Modul internal masih didukung, tetapi disarankan untuk menggunakan namespace melalui modul internal.

Sintaks Modul Internal (Lama)

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

Sintaks Ruangnama (Baru)

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

JavaScript yang dihasilkan dalam kedua kasus sama

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

Modul Eksternal

Modul eksternal di TypeScript ada untuk menentukan dan memuat ketergantungan antara beberapa eksternal jsfile. Jika hanya ada satujsfile yang digunakan, maka modul eksternal tidak relevan. Secara tradisional manajemen ketergantungan antara file JavaScript dilakukan dengan menggunakan tag script browser (<script> </script>). Tapi itu tidak dapat diperpanjang, karena sangat linier saat memuat modul. Artinya, alih-alih memuat file satu per satu, tidak ada opsi asinkron untuk memuat modul. Ketika Anda memprogram js untuk server misalnya NodeJ, Anda bahkan tidak memiliki tag skrip.

Ada dua skenario untuk memuat tanggungan js file dari satu file JavaScript utama.

  • Sisi Klien - RequireJs
  • Sisi Server - NodeJs

Memilih Module Loader

Untuk mendukung pemuatan file JavaScript eksternal, kita membutuhkan pemuat modul. Ini akan menjadi yang lainjsPerpustakaan. Untuk browser pustaka yang paling umum digunakan adalah RequieJS. Ini adalah implementasi dari spesifikasi AMD (Asynchronous Module Definition). Alih-alih memuat file satu per satu, AMD dapat memuat semuanya secara terpisah, bahkan ketika mereka bergantung satu sama lain.

Mendefinisikan Modul Eksternal

Saat menentukan modul eksternal dalam TypeScript yang menargetkan CommonJS atau AMD, setiap file dianggap sebagai modul. Jadi opsional untuk menggunakan modul internal dengan modul eksternal.

Jika Anda memigrasi TypeScript dari sistem modul AMD ke CommonJs, maka tidak ada pekerjaan tambahan yang diperlukan. Satu-satunya hal yang perlu Anda ubah hanyalah flag compiler Tidak seperti di JavaScript, ada overhead dalam migrasi dari CommonJs ke AMD atau sebaliknya.

Sintaks untuk mendeklarasikan modul eksternal menggunakan kata kunci 'ekspor' dan 'impor'.

Sintaksis

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

Untuk menggunakan modul yang dideklarasikan di file lain, kata kunci import digunakan seperti yang diberikan di bawah ini. Nama file hanya ditentukan tanpa ekstensi yang digunakan.

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

Contoh

Mari kita pahami ini menggunakan sebuah contoh.

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

Perintah untuk mengompilasi file TypeScript utama untuk sistem AMD adalah -

tsc --module amd TestShape.ts

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut untuk AMD.

File: IShape.js

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

File: 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;
});

File: 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;
});

File: 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());
});

Perintah untuk mengompilasi file TypeScript utama Commonjs sistem adalah

tsc --module commonjs TestShape.ts

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut untuk Commonjs.

File: 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;

File: 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;

File: 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());

Keluaran

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