Các mô-đun trong TypeScript
Bài viết này giải thích về các mô-đun trong TypeScript.
YouTube Video
Các mô-đun trong TypeScript
Các mô-đun trong TypeScript là một tính năng quan trọng giúp tăng cường khả năng tái sử dụng và duy trì mã nguồn. Giống như JavaScript, TypeScript cũng dựa trên hệ thống mô-đun ECMAScript 2015 (ES6), nhưng một tính năng quan trọng là khả năng tận dụng hệ thống kiểu dữ liệu của TypeScript.
Mô-đun là gì?
Mô-đun là một hệ thống để nhóm các mã liên quan vào một đơn vị duy nhất mà có thể được nhập và tái sử dụng trong các tệp khác. Trong TypeScript, mỗi tệp sẽ tạo ra một phạm vi riêng để bao gói mã, ngăn chặn nó ảnh hưởng đến các tệp khác. Điều này giúp tránh xung đột mã và làm cho việc bảo trì trở nên dễ dàng hơn.
Các mô-đun Nội bộ và Ngoại bộ
- Mô-đun Nội bộ (Namespace): Một phương pháp định nghĩa mô-đun được sử dụng trong TypeScript 1.5 và trước đó, hiện không còn được khuyến khích sử dụng. Hiện tại nó được coi là một 'namespace.'.
- Mô-đun Ngoại bộ: Tiêu chuẩn hiện tại, dựa trên hệ thống mô-đun ES6. Phần này chủ yếu giải thích các mô-đun bên ngoài.
Cách Xuất các Mô-đun
Khi tạo mô-đun, việc xuất là cần thiết để cho phép truy cập từ bên ngoài. Trong TypeScript, bạn có thể xuất các giá trị, hàm, lớp, v.v. bằng từ khóa export. Chủ yếu có hai loại xuất.
Xuất Có Tên
Được sử dụng để xuất nhiều mục, cho phép phía nhập chọn lọc và sử dụng các mục cụ thể.
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}Xuất Mặc Định
Được sử dụng khi bạn muốn toàn bộ mô-đun chỉ có một mục xuất mặc định. Xuất mặc định được thực hiện mà không cần tên, cho phép phía nhập nhận với bất kỳ tên nào.
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}Cách nhập các mô-đun
Để sử dụng các mô-đun, bạn nhập các giá trị, hàm, lớp, v.v. từ trong mô-đun bằng từ khóa import.
Nhập đích danh
Khi nhập các phần tử cụ thể từ một xuất đích danh, hãy sử dụng dấu ngoặc nhọn {}.
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);Nhập mặc định
Khi nhập một xuất mặc định, bạn có thể nhận nó với bất kỳ tên nào.
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);Bí danh nhập
Để tránh xung đột tên hoặc rút ngắn tên dài, bạn có thể nhập với một bí danh.
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);Sự khác biệt giữa Mô-đun và Không gian tên
Không gian tên (namespace) là cấu trúc mô-đun nội bộ được sử dụng trong TypeScript giai đoạn đầu để nhóm mã lại với nhau. Tuy nhiên, các mô-đun ES6 hiện được khuyến nghị và không gian tên hiếm khi cần thiết.
Không gian tên có thể được định nghĩa trong cùng một tệp hoặc qua nhiều tệp, và vì chúng có thể được mở rộng toàn cục, quản lý sự phụ thuộc có thể trở nên khó khăn. Ngược lại, các mô-đun có phạm vi tách biệt theo từng tệp và có sự phụ thuộc rõ ràng, khiến chúng trở thành một phương pháp hiện đại và an toàn hơn.
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);Quy trình giải quyết mô-đun TypeScript
Trong TypeScript, có hai chiến lược để giải quyết mô-đun.
- Giải quyết mô-đun Node: Phương pháp giải quyết tiêu chuẩn được sử dụng trong môi trường Node.js để giải quyết các mô-đun bằng cách tìm kiếm trong thư mục
node_modules. - Giải quyết mô-đun Cổ điển: Phương pháp giải quyết riêng của TypeScript cho phép tìm kiếm linh hoạt hơn, nhưng ngày nay không được sử dụng rộng rãi.
Thông thường, giải quyết mô-đun Node được sử dụng và được bật mặc định trừ khi được chỉ định khác trong tệp cấu hình.
Ví dụ thực tế
Cuối cùng, một ví dụ về việc triển khai và tái sử dụng các hàm tính toán bằng cách sử dụng các mô-đun được trình bày.
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);Tóm tắt
Hệ thống mô-đun TypeScript là một công cụ mạnh mẽ để tổ chức mã, nâng cao khả năng tái sử dụng và tăng cường khả năng bảo trì. Việc sử dụng các mô-đun bên ngoài dựa trên các mô-đun ES6 được khuyến nghị, và việc sử dụng các từ khóa export và import cho phép xuất và nhập các mô-đun một cách dễ dàng.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.