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 {}.

namespace <name>
{
    
}

Hãy xem ví dụ sau về các hàm xử lý chuỗi trong namespace StringUtilities.

namespace StringUtility 
{
    function ToCapital(str: string): string {
        return str.toUpperCase();
    }

    function SubString(str: string, from: number, length: number = 0): string {
        return str.substr(from, length);
    }
}

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.

namespace StringUtility {

    export function ToCapital(str: string): string {
        return str.toUpperCase();
    }

    export function SubString(str: string, from: number, length: number = 0): string {
        return str.substr(from, length);
    }
}

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