Namespace trong TypeScript
Namespace được sử dụng để nhóm logic các chức năng. Namespace có thể bao gồm các interface, lớp, hàm và biến để hỗ trợ một nhóm các chức năng liên quan.
Namespace có thể được tạo bằng cách sử dụng từ khóa namespace
theo sau là tên namespace. Tất cả các interface, lớp, v.v. có thể được định nghĩa trong dấu ngoặc nhọn {}.
Hãy xem ví dụ sau về các hàm xử lý chuỗi trong namespace StringUtilities
.
Tệp StringUtility.ts
trên bao gồm namespace StringUtility
bao gồm hai hàm xử lý chuỗi đơn giản. Namespace StringUtility
tạo ra một nhóm logic của các hàm xử lý chuỗi quan trọng cho ứng dụng của chúng ta.
Theo mặc định, các thành phần trong namespace không thể được sử dụng trong các module hoặc namespace khác. Bạn phải export từng thành phần để có thể truy cập bên ngoài, sử dụng từ khóa export như ví dụ bên dưới.
Bây giờ, chúng ta có thể sử dụng namespace StringUtility
ở nơi khác. Mã JavaScript sau sẽ được tạo cho namespace ở trên sau khi biên dịch.
var StringUtility;
(function (StringUtility) {
function ToCapital(str){
return str.toUpperCase();
}
StringUtility.ToCapital = ToCapital;
function SubString(str, from, length) {
if (length === void 0) { length = 0; }
return str.substr(from, length);
}
StringUtility.SubString = SubString;
})(StringUtility || (StringUtility = {}));
Như bạn có thể thấy, mã JavaScript được tạo ở trên cho namespace sử dụng mẫu IIFE để tránh vi phạm phạm vi toàn cục. Tìm hiểu về các namespace pattern khác tại đây.
Hãy sử dụng namespace StringUtility
ở trên trong module Employee
, như được trình bày ở ví dụ bên dưới.
/// <reference path="StringUtility.ts" />
export class Employee {
empCode: number;
empName: string;
constructor(name: string, code: number) {
this.empName = StringUtility.ToCapital(name);
this.empCode = code;
}
displayEmployee() {
console.log ("Employee Code: " + this.empCode + ", Employee Name: " + this.empName );
}
}
Để sử dụng các thành phần trong namespace ở những nơi khác, trước tiên chúng ta cần đưa vào namespace bằng cách sử dụng cú pháp tham chiếu dấu gạch chéo ba /// <reference path="path to namespace file" />
. Sau khi bao gồm tệp namespace bằng cách sử dụng thẻ tham chiếu, chúng ta có thể truy cập tất cả các chức năng bằng cách sử dụng namespace. Ở trên, chúng tôi đã sử dụng hàm ToCapital()
như thế này: StringUtility.ToCapital()
.
Cho đến nay, chúng ta đã sử dụng tệp .ts. Tuy nhiên, chúng ta cần các tệp .js để đưa chúng vào ứng dụng của mình. Vì vậy, chúng ta cần biên dịch các tệp .ts và lấy các tệp .js cho tất cả các namespace của chúng ta.
Biên dịch namespace
Sử dụng tùy chọn --outFile
cho lệnh sau để tạo một tệp .js cho một hoặc nhiều namespace.
tsc --outFile File.js File.ts
Trong tùy chọn --outFile
ở trên, File.js là tên và đường dẫn của tệp JavaScript và File.ts là tên và đường dẫn tệp namespace.
Để biên dịch tệp StringUtility.ts
, hãy mở dấu nhắc lệnh trên Windows và thực hiện lệnh sau:
tsc --outFile C:MyTypeScriptNameSpacesStringUtility.js C:MyTypeScriptNameSpacesStringUtility.ts
Lệnh trên sẽ tạo tệp JavaScript Utility.js
cho tệp TypeScript StringUtility.ts
.
var StringUtility;
(function (StringUtility) {
function ToCapital(str) {
return str.toUpperCase();
}
StringUtility.ToCapital = ToCapital;
function SubString(str, from, length) {
if (length === void 0) { length = 0; }
return str.substr(from, length);
}
StringUtility.SubString = SubString;
})(StringUtility || (StringUtility = {}));
Bây giờ, chúng ta cần đưa tệp StringUtility.js
trên vào thẻ <script> của trang HTML.
Tùy chọn lệnh sau được sử dụng để biên dịch nhiều namespace thành một tệp .js duy nhất.
tsc --outFile File.js File1.ts File2.ts File3.ts .. FileN.ts
Namespace so với Module
Namespace | Module |
---|---|
Phải sử dụng từ khóa namespace và từ khóa export để hiển thị các thành phần của namespace. | Sử dụng từ khóa export để hiển thị các chức năng của module. |
Được sử dụng để phân nhóm logic các chức năng với phạm vi cục bộ. | Được sử dụng để tổ chức mã trong các tệp riêng biệt và tránh vi phạm phạm vi toàn cục. |
Để sử dụng nó, nó phải được đưa vào bằng cách sử dụng cú pháp tham chiếu dấu gạch chéo ba, ví dụ ///<reference path="path to namespace file" /> .
|
Phải import nó trước để sử dụng nó ở nơi khác. |
Biên dịch bằng lệnh --outFile . |
Biên dịch bằng lệnh --module . |
Phải export các hàm và lớp để có thể truy cập nó bên ngoài namespace. | Tất cả các thành phần export trong một module đều có thể được truy cập từ bên ngoài module. |
Namespace không thể khai báo các phụ thuộc của chúng. | Các module có thể khai báo các phụ thuộc của chúng. |
Không cần bộ tải module. Thêm tệp .js của một namespace bằng cách sử dụng thẻ <script> trong trang HTML.
|
Phải cần API trình tải module đã được chỉ định tại thời điểm biên dịch, ví dụ: CommonJS, request.js, v.v. |