Typescript

Module trong TypeScript

Posted on by ComdyVN

Module trong TypeScript

Trong phần này, chúng ta sẽ tìm hiểu về module trong TypeScript.

Theo mặc định, mã TypeScript mà chúng ta viết nằm trong phạm vi toàn cục (global). Nếu chúng ta có nhiều tệp trong một dự án, các biến, hàm, v.v. được viết trong một tệp có thể truy cập được trong tất cả các tệp khác.

Ví dụ: hãy xem xét các tệp TypeScript sau: file1.ts và file2.ts

var greeting : string = "Hello World!";
file1.ts
console.log(greeting); //Prints Hello World!

greeting = "Hello TypeScript"; // allowed
file2.ts

Biến greeting ở trên, được khai báo trong file1.ts cũng có thể truy cập được trong file2.ts. Nó không chỉ có thể truy cập được mà còn có thể sửa đổi. Bất kỳ ai cũng có thể dễ dàng ghi đè các biến được khai báo trong phạm vi toàn cục mà không cần biết rằng chúng đang làm gì! Đây là một không gian nguy hiểm vì nó có thể dẫn đến xung đột / lỗi trong mã.

TypeScript cung cấp các module và namespace để ngăn phạm vi toàn cục mặc định của mã và cũng để tổ chức và duy trì một cơ sở mã lớn.

Module là một cách để tạo phạm vi cục bộ trong tệp. Vì vậy, tất cả các biến, lớp, hàm, v.v. được khai báo trong một module đều không thể truy cập được bên ngoài module. Một module có thể được tạo bằng cách sử dụng từ khóa export và một module có thể được sử dụng trong một module khác bằng cách sử dụng từ khóa import.

Trong TypeScript, các tệp chứa export hoặc import cấp cao nhất được coi là module. Ví dụ, chúng ta có thể tạo các tệp trên dưới dạng module như bên dưới.

export var greeting : string = "Hello World!";
file1.ts
console.log(greeting); //Error: cannot find 'greeting'

greeting = "Hello TypeScript";
file2.ts

Trong file1.ts, chúng tôi đã sử dụng từ khóa export ở trước biến greeting. Bây giờ, truy cập biến greeting trong file2.ts sẽ xuất hiện lỗi. Điều này là do greeting không còn ở phạm vi toàn cục. Để truy cập biến greeting trong file2.ts, chúng ta phải import module file1 vào file2 bằng cách sử dụng từ khóa import.

Hãy cùng tìm hiểu chi tiết về import và export module trong TypeScript.

Export module trong TypeScript

Một module có thể được định nghĩa trong một tệp .ts riêng biệt có thể chứa các hàm, biến, interface và class. Sử dụng tiền tố export với tất cả các định nghĩa bạn muốn đưa vào một module và muốn truy cập từ các module khác.

export let age : number = 20;
export class Employee {
    empCode: number;
    empName: string;
    constructor(name: string, code: number) {
        this.empName = name;
        this.empCode = code;
    }
    displayEmployee() {
        console.log ("Employee Code: " + this.empCode + ", Employee Name: " + this.empName );
    }
}
let companyName:string = "XYZ";

Trong ví dụ trên, Employee.ts là một module chứa hai biến và một lớp. Biến age và lớp Employee được bắt đầu với từ khóa export, trong khi biến companyName thì không. Do đó, Employee.ts là một module có biến age và lớp Employee sẽ được sử dụng trong các module khác bằng cách import module Employee bằng cách sử dụng từ khóa import. Biến companyName không thể được truy cập bên ngoài module Employee, vì nó không được export.

Import module trong TypeScript

Một module có thể được sử dụng trong một module khác bằng cách sử dụng từ khóa import.

Hãy xem cú pháp sử dụng module.

import { export name } from "file path without extension"
Cú pháp import module trong TypeScript

Import một thành phần được export của ​​module

Chúng ta đã export một biến và một lớp trong tệp Employee.ts. Tuy nhiên, chúng ta chỉ có thể import một thành phần được export của module mà chúng ta sẽ sử dụng. Đoạn mã sau chỉ import lớp Employee từ tệp Employee.ts vào một module khác trong tệp EmployeeProcessor.ts.

import { Employee } from "./Employee";

let empObj = new Employee("Steve Jobs", 1);
empObj.displayEmployee(); //Output: Employee Code: 1, Employee Name: Steve Jobs

Import toàn bộ module vào một biến

Bạn có thể import tất cả các thành phần được export trong một module như đoạn mã dưới đây.

import * as Emp from "./Employee"

console.log(Emp.age); // 20

let empObj = new Emp.Employee("Bill Gates" , 2);
empObj.displayEmployee(); //Output: Employee Code: 2, Employee Name: Bill Gates

Trong ví dụ trên, chúng ta đã import tất cả các thành phần được export trong module Employee trong một biến duy nhất được gọi là Emp. Vì vậy, chúng ta không cần phải viết câu lệnh import cho từng thành phần riêng lẻ được export  trong module. Trong ví dụ trên, nó sẽ import biến age và lớp Employee vào biến Emp và có thể được truy cập bằng cách sử dụng Emp.age và Emp.Employee.

Đổi tên thành phần được export từ ​​module

Bạn có thể thay đổi tên của một thành phần được export từ ​​module như ví dụ dưới đây.

import { Employee as Associate } from "./Employee"

let obj = new Associate("James Bond" , 3);
obj.displayEmployee();//Output: Employee Code: 3, Employee Name: James Bond

Trong ví dụ trên, tên của lớp Employee được thay đổi thành Associate sử dụng cú pháp { employee as Associate }. Điều này hữu ích trong việc chỉ định một tên có ý nghĩa hơn cho một thành phần được export từ ​​module, theo nhu cầu của bạn, điều này giúp tăng khả năng đọc.

Bây giờ, khi chúng ta định nghĩa các module của mình trong tệp .ts, chúng ta cần biên dịch chúng để lấy tệp .js. Việc biên dịch module trong TypeScript phụ thuộc vào nhiều thứ khác nhau.

Biên dịch module TypeScript

Trong phần trước, chúng ta đã export và import một module trong một tệp .ts. Chúng ta không thể sử dụng module TypeScript trực tiếp trong ứng dụng của mình. Chúng ta cần biên dịch các module TypeScript thành mã JavaScript bằng trình biên dịch TypeScript.

Việc biên dịch một module phụ thuộc vào môi trường mục tiêu mà bạn đang hướng tới. Trình biên dịch TypeScript tạo mã JavaScript dựa trên tùy chọn mục tiêu biên dịch module được chỉ định trong quá trình biên dịch.

Sử dụng lệnh sau để biên dịch module TypeScript và tạo mã JavaScript.

--module <target> <file path>

Nếu bạn đang sử dụng IDE, thì bạn phải thiết lập mục tiêu biên dịch module trong IDE hoặc trong tệp tsconfig.json.

Sau đây là các mục tiêu có thể được gắn cho <target> trong lệnh trên:

  1. None
  2. CommonJS
  3. AMD
  4. UMD
  5. System
  6. ES6, ES2015 or ESNext

Việc sử dụng các mục tiêu trên phụ thuộc vào ứng dụng và trình tải module bạn đang sử dụng. Ví dụ: sử dụng tùy chọn CommonJS cho các ứng dụng Node.js phía máy chủ mà bạn đang sử dụng trình tải module CommonJS; sử dụng tùy chọn AMD nếu bạn đang sử dụng trình tải module phía máy khách request.js cho ứng dụng web; sử dụng tùy chọn mục tiêu UMD cho cả module phía máy khách và phía máy chủ; sử dụng tùy chọn mục tiêu System cho các module ES, sử dụng ES6 hoặc ES2015 cho các module ES5 trở xuống.

Hãy biên dịch module Employee được tạo trong chương trước, cho ứng dụng web phía máy khách với trình tải module request.js. Mở dấu nhắc lệnh trên Windows, điều hướng đến đường dẫn nơi tệp module được lưu trữ và thực hiện lệnh sau:

C:MyTypeScriptModules>tsc --module amd Employee.ts

Điều này sẽ tạo module JavaScript sau cho ứng dụng phía máy khách, có thể được tải bằng cách sử dụng request.js:

define(["require", "exports"], function (require, exports) {
            "use strict";
    exports.__esModule = true;
    exports.age = 20;
            var Employee = /** @class */ (function () {
            function Employee(name, code) {
            this.name = name;
            this.empCode = code;
        }
        Employee.prototype.displayEmployee = function () {
            console.log ("Employee Code: " + this.empCode + ", Employee Name: " + this.empName );
        };
            return Employee;
    }());
    exports.Employee = Employee;
            var companyName = "XYZ";
});

Bây giờ, hãy biên dịch module EmployeeProcessor, trong đó chúng ta đã sử dụng module Employee.

C:MyTypeScriptModules>tsc --module amd EmployeeProcessor.ts

Lệnh trên sẽ tạo mã JavaScript sau để module EmployeeProcessor được sử dụng với trình tải module request.js trong ứng dụng web.

define(["require", "exports", "./Employee"], function (require, exports, Employee_1) {
            "use strict";
    exports.__esModule = true;
            var empObj = new emp.Employee("Steve Jobs", 1);
    empObj.displayEmployee();
});

Thiết lập mục tiêu module trong Visual Studio

Nếu bạn đang sử dụng Visual Studio 2017, thì bạn có thể thiết lập tùy chọn hệ thống module trong tab TypeScript Build. Mở Properties của dự án bằng cách nhấp chuột phải vào dự án trong Solution Explorer và chọn Properties. Đi tới tab TypeScriptBuild trong cửa sổ Properties và thiết lập Module System thành AMD, như được hiển thị bên dưới.

Thiết lập mục tiêu module trong Visual Studio

Bây giờ, Visual Studio sẽ tạo tệp JavaScript cho tất cả các module TypeScript được thiết lập mục tiêu cho trình tải module request.js cho ứng dụng web.

Sử dụng module trong ứng dụng Web

Sau khi biên dịch thành mã JavaScript cho các module TypeScript của mình, chúng ta cần sử dụng chúng trong ứng dụng. Chúng ta có thể sử dụng module trên trong trang web của chúng ta bằng trình tải module request.js.

Tệp HTML sau đây cho thấy cách sử dụng module với trình tải module request.js trong trình duyệt.

<!DOCTYPE html>
<html lang="en">
<head>
    <script data-main="./EmployeeProcessor" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
</head>
<body>
    <h1>TypeScript Module Demo</h1>
</body>
</html>

Trong mã HTML ở trên, chúng ta đã bao gồm tệp request.min.js từ CDN bằng cách sử dụng thẻ <script>. Thẻ <script> cũng phải chỉ định module ban đầu được nạp cho các ứng dụng của bạn bằng cách sử dụng thuộc tính data-main. Do đó, API request.js sẽ tải module ban đầu được chỉ định trong thuộc tính data-main và tất cả các module khác sẽ được tải không đồng bộ khi được yêu cầu.

Bằng cách này, bạn có thể export, import, biên dịch và sử dụng các module trong ứng dụng web.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *