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)