TypeScript - โมดูล

โมดูลได้รับการออกแบบโดยมีแนวคิดในการจัดระเบียบโค้ดที่เขียนใน TypeScript โมดูลแบ่งออกเป็น -

  • โมดูลภายใน
  • โมดูลภายนอก

โมดูลภายใน

โมดูลภายในมาใน typescript เวอร์ชันก่อนหน้า สิ่งนี้ใช้เพื่อจัดกลุ่มคลาสอินเทอร์เฟซฟังก์ชันในหน่วยเดียวและสามารถส่งออกในโมดูลอื่นได้ การจัดกลุ่มตรรกะนี้มีชื่อว่าเนมสเปซใน TypeScript เวอร์ชันล่าสุด ดังนั้นโมดูลภายในจึงล้าสมัย แต่เราสามารถใช้เนมสเปซได้ โมดูลภายในยังคงได้รับการสนับสนุน แต่แนะนำให้ใช้เนมสเปซกับโมดูลภายใน

ไวยากรณ์ของโมดูลภายใน (เก่า)

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

Namespace Syntax (ใหม่)

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

JavaScript ที่สร้างขึ้นในทั้งสองกรณีจะเหมือนกัน

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

โมดูลภายนอก

โมดูลภายนอกใน TypeScript มีอยู่เพื่อระบุและโหลดการอ้างอิงระหว่างภายนอกหลาย ๆ jsไฟล์. หากมีเพียงหนึ่งเดียวjsใช้ไฟล์แล้วโมดูลภายนอกจะไม่เกี่ยวข้อง ตามเนื้อผ้าการจัดการการพึ่งพาระหว่างไฟล์ JavaScript ทำได้โดยใช้แท็กสคริปต์ของเบราว์เซอร์ (<script> </script>) แต่ไม่สามารถขยายได้เนื่องจากเป็นเชิงเส้นมากขณะโหลดโมดูล นั่นหมายความว่าแทนที่จะโหลดไฟล์ทีละไฟล์จะไม่มีตัวเลือกแบบอะซิงโครนัสในการโหลดโมดูล เมื่อคุณเขียนโปรแกรม js สำหรับเซิร์ฟเวอร์เช่น NodeJs คุณไม่มีแท็กสคริปต์

มีสองสถานการณ์สำหรับการโหลดผู้ติดตาม js ไฟล์จากไฟล์ JavaScript หลักไฟล์เดียว

  • ฝั่งไคลเอ็นต์ - RequireJs
  • ฝั่งเซิร์ฟเวอร์ - NodeJs

การเลือก Module Loader

เพื่อรองรับการโหลดไฟล์ JavaScript ภายนอกเราจำเป็นต้องมีตัวโหลดโมดูล นี่จะเป็นอีกแบบjsห้องสมุด. สำหรับเบราว์เซอร์ไลบรารีที่ใช้บ่อยที่สุดคือ RequieJS นี่คือการนำข้อกำหนดของ AMD (Asynchronous Module Definition) มาใช้ แทนที่จะโหลดไฟล์ทีละไฟล์ AMD สามารถโหลดไฟล์ทั้งหมดแยกกันแม้ว่าจะต้องพึ่งพากันก็ตาม

การกำหนดโมดูลภายนอก

เมื่อกำหนดโมดูลภายนอกใน TypeScript ที่กำหนดเป้าหมาย CommonJS หรือ AMD แต่ละไฟล์จะถูกพิจารณาว่าเป็นโมดูล ดังนั้นจึงเป็นทางเลือกที่จะใช้โมดูลภายในร่วมกับโมดูลภายนอก

หากคุณกำลังโอนย้าย TypeScript จาก AMD ไปยังระบบโมดูล CommonJs ก็ไม่จำเป็นต้องทำงานเพิ่มเติม สิ่งเดียวที่คุณต้องเปลี่ยนมีเพียงแฟล็กคอมไพเลอร์ซึ่งแตกต่างจากใน JavaScript มีค่าใช้จ่ายในการย้ายจาก CommonJs ไปยัง AMD หรือในทางกลับกัน

ไวยากรณ์สำหรับการประกาศโมดูลภายนอกใช้คีย์เวิร์ด 'export' และ 'import'

ไวยากรณ์

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

ในการใช้โมดูลที่ประกาศในไฟล์อื่นจะใช้คีย์เวิร์ดอิมพอร์ตตามที่ระบุด้านล่าง มีการระบุชื่อไฟล์เท่านั้นไม่มีการใช้นามสกุล

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

ตัวอย่าง

มาทำความเข้าใจกันโดยใช้ตัวอย่าง

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

คำสั่งในการคอมไพล์ไฟล์ TypeScript หลักสำหรับระบบ AMD คือ -

tsc --module amd TestShape.ts

ในการคอมไพล์จะสร้างโค้ด JavaScript ต่อไปนี้สำหรับ AMD

ไฟล์: IShape.js

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

ไฟล์: 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;
});

ไฟล์: 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;
});

ไฟล์: 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());
});

คำสั่งเพื่อคอมไพล์ไฟล์ TypeScript หลักสำหรับ Commonjs ระบบคือ

tsc --module commonjs TestShape.ts

ในการคอมไพล์จะสร้างโค้ด JavaScript ต่อไปนี้สำหรับ Commonjs.

ไฟล์: 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;

ไฟล์: 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;

ไฟล์: 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());

เอาต์พุต

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