TypeScript - Mô-đun
Một mô-đun được thiết kế với ý tưởng để tổ chức mã được viết bằng TypeScript. Các mô-đun được chia rộng rãi thành -
- Mô-đun nội bộ
- Mô-đun bên ngoài
Mô-đun nội bộ
Các mô-đun nội bộ đã có trong phiên bản trước của Typecript. Điều này được sử dụng để nhóm các lớp, giao diện, chức năng một cách hợp lý thành một đơn vị và có thể được xuất trong một mô-đun khác. Nhóm logic này được đặt tên là không gian tên trong phiên bản TypeScript mới nhất. Vì vậy, các mô-đun bên trong đã lỗi thời thay vào đó chúng ta có thể sử dụng không gian tên. Mô-đun nội bộ vẫn được hỗ trợ, nhưng khuyến nghị sử dụng không gian tên trên các mô-đun nội bộ.
Cú pháp mô-đun nội bộ (Cũ)
module TutorialPoint {
export function add(x, y) {
console.log(x+y);
}
}Cú pháp vùng tên (Mới)
namespace TutorialPoint {
export function add(x, y) { console.log(x + y);}
}JavaScript được tạo trong cả hai trường hợp đều giống nhau
var TutorialPoint;
(function (TutorialPoint) {
function add(x, y) {
console.log(x + y);
}
TutorialPoint.add = add;
})(TutorialPoint || (TutorialPoint = {}));Mô-đun bên ngoài
Các mô-đun bên ngoài trong TypeScript tồn tại để chỉ định và tải các phụ thuộc giữa nhiều bên ngoài jscác tập tin. Nếu chỉ có mộtjstệp được sử dụng, sau đó các mô-đun bên ngoài không liên quan. Theo truyền thống, quản lý phụ thuộc giữa các tệp JavaScript được thực hiện bằng cách sử dụng thẻ tập lệnh của trình duyệt (<script> </script>). Nhưng điều đó không thể mở rộng, vì nó rất tuyến tính trong khi tải các mô-đun. Điều đó có nghĩa là thay vì tải từng tệp một, không có tùy chọn không đồng bộ để tải mô-đun. Khi bạn đang lập trình js cho máy chủ, ví dụ NodeJs, bạn thậm chí không có thẻ script.
Có hai tình huống để tải người phụ thuộc js các tệp từ một tệp JavaScript chính duy nhất.
- Phía khách hàng - Yêu cầu
- Phía máy chủ - NodeJs
Chọn một trình tải mô-đun
Để hỗ trợ tải các tệp JavaScript bên ngoài, chúng tôi cần một trình tải mô-đun. Đây sẽ là mộtjsthư viện. Đối với trình duyệt, thư viện phổ biến nhất được sử dụng là RequestieJS. Đây là một triển khai của đặc điểm kỹ thuật AMD (Định nghĩa mô-đun không đồng bộ). Thay vì tải từng tệp một, AMD có thể tải tất cả chúng một cách riêng biệt, ngay cả khi chúng phụ thuộc vào nhau.
Xác định mô-đun bên ngoài
Khi xác định mô-đun bên ngoài trong TypeScript nhắm mục tiêu CommonJS hoặc AMD, mỗi tệp được coi là một mô-đun. Vì vậy, có thể tùy chọn sử dụng mô-đun bên trong với mô-đun bên ngoài.
Nếu bạn đang di chuyển TypeScript từ AMD sang hệ thống mô-đun CommonJs thì không cần thực hiện thêm công việc nào. Điều duy nhất bạn cần thay đổi chỉ là cờ của trình biên dịch Không giống như trong JavaScript, việc di chuyển từ CommonJs sang AMD hoặc ngược lại phải mất một khoản chi phí.
Cú pháp để khai báo mô-đun bên ngoài là sử dụng từ khóa 'export' và 'import'.
Cú pháp
//FileName : SomeInterface.ts
export interface SomeInterface {
//code declarations
}Để sử dụng mô-đun đã khai báo trong một tệp khác, một từ khóa nhập được sử dụng như được cung cấp bên dưới. Tên tệp chỉ được chỉ định mà không sử dụng phần mở rộng.
import someInterfaceRef = require(“./SomeInterface”);Thí dụ
Hãy hiểu điều này bằng cách sử dụng một ví dụ.
// 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());Lệnh để biên dịch tệp TypeScript chính cho hệ thống AMD là:
tsc --module amd TestShape.tsKhi biên dịch, nó sẽ tạo mã JavaScript sau cho AMD.
Tệp: IShape.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});Tệp: 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;
});Tệp: 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;
});Tệp: 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());
});Lệnh biên dịch tệp TypeScript chính cho Commonjs hệ thống là
tsc --module commonjs TestShape.tsKhi biên dịch, nó sẽ tạo mã JavaScript sau cho Commonjs.
Tệp: 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;Tệp: 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;Tệp: 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());Đầu ra
Cirlce is drawn (external module)
Triangle is drawn (external module)