Modules trong TypeScript là gì?

Question

Đậu Phộng Phộng · Accepted Answer

Modules trong TypeScript là một cách để tổ chức và chia nhỏ mã nguồn thành các phần độc lập, có thể tái sử dụng và dễ dàng quản lý hơn. Module cho phép bạn tách biệt các phần chức năng của ứng dụng thành các tệp riêng lẻ, sau đó sử dụng imports và exports để chia sẻ và kết hợp các phần mã cần thiết giữa các tệp khác nhau. TypeScript dựa trên mô hình module của JavaScript nhưng mở rộng khả năng với các tính năng của ngôn ngữ hiện đại.
Khái niệm cơ bản về Modules trong TypeScript
Module trong TypeScript là bất kỳ tệp nào có chứa các từ khóa export hoặc import. Mỗi tệp TypeScript thực sự là một module nếu nó xuất ra hoặc nhập vào các thành phần khác.
Cách hoạt động của Modules
Các module trong TypeScript hoạt động theo hai cơ chế chính:
Export: Để xuất các thành phần (biến, hàm, lớp, interface, v.v.) ra ngoài để có thể sử dụng trong các module khác.
Import: Để nhập các thành phần từ các module khác vào trong tệp hiện tại để sử dụng.
Ví dụ về Modules
1. Xuất một thành phần (Export)
Bạn có thể xuất bất kỳ thành phần nào trong một tệp bằng cách sử dụng từ khóa export.
// file: mathUtils.ts
export function add(a: number, b: number): number {
    return a + b;
}
export const PI = 3.14;
Trong tệp mathUtils.ts, hàm add và hằng số PI được xuất ra để có thể sử dụng ở những tệp khác.
2. Nhập một thành phần (Import)
Bạn có thể nhập các thành phần từ một module khác vào module hiện tại bằng từ khóa import.
// file: main.ts
import { add, PI } from './mathUtils';
console.log(add(5, 10));  // 15
console.log(PI);          // 3.14
Trong tệp main.ts, chúng ta đã nhập hàm add và hằng số PI từ module mathUtils.ts và sử dụng chúng.
Các loại Export trong TypeScript
TypeScript hỗ trợ hai cách xuất: export có tên (named export) và export mặc định (default export).
1. Named Export (Export có tên)
Xuất có tên cho phép bạn xuất nhiều thành phần cùng lúc từ một module. Bạn cần chỉ định rõ ràng tên của thành phần khi nhập nó.
// file: shapes.ts
export interface Circle {
    radius: number;
}
export interface Rectangle {
    width: number;
    height: number;
}
Nhập các thành phần với tên cụ thể:
import { Circle, Rectangle } from './shapes';
2. Default Export (Xuất mặc định)
Xuất mặc định cho phép bạn chỉ định một thành phần chính làm đầu ra chính của module. Bạn không cần sử dụng tên cụ thể khi nhập.
// file: calculator.ts
export default function multiply(a: number, b: number): number {
    return a * b;
}
Khi nhập thành phần xuất mặc định, bạn có thể sử dụng bất kỳ tên nào:
import multiply from './calculator';
console.log(multiply(3, 5));  // 15
Cách Import trong TypeScript
Import cụ thể theo tên: Bạn có thể nhập một số thành phần cụ thể từ một module.
import { add, subtract } from './mathUtils';
Import tất cả các thành phần: Bạn có thể nhập toàn bộ module và đặt cho nó một tên.
import * as MathUtils from './mathUtils';
console.log(MathUtils.add(2, 3));
console.log(MathUtils.PI);
Import xuất mặc định: Như đã đề cập, bạn có thể nhập một thành phần mặc định mà không cần dùng tên cụ thể.
import defaultExport from './someModule';
Modules nội bộ và ngoại vi
Modules nội bộ: Là các tệp trong cùng một dự án và được liên kết với nhau bằng cách sử dụng đường dẫn tệp tương đối (ví dụ: ./mathUtils).
Modules ngoại vi: Là các package hoặc thư viện bên ngoài, thường được cài đặt qua npm (ví dụ: các thư viện từ node_modules). Bạn có thể nhập các modules từ node_modules mà không cần cung cấp đường dẫn cụ thể.
Ví dụ về nhập module từ thư viện bên ngoài:
import * as _ from 'lodash';
Modules trong TypeScript và JavaScript
TypeScript hỗ trợ hai hệ thống module chính:
ES Modules (ECMAScript Modules): Là hệ thống module tiêu chuẩn của JavaScript (ES6+), sử dụng các từ khóa import và export. Đây là chuẩn được khuyến khích sử dụng.
CommonJS Modules: Đây là hệ thống module được sử dụng trong Node.js, sử dụng các từ khóa require và module.exports.
Bạn có thể chọn hệ thống module bằng cách cấu hình trong tệp tsconfig.json:
{
  "compilerOptions": {
    "module": "ESNext"   // hoặc "CommonJS"
  }
}
Kết luận
Modules trong TypeScript là công cụ mạnh mẽ giúp bạn tổ chức mã nguồn theo cách dễ quản lý, dễ bảo trì, và dễ tái sử dụng. Bằng cách sử dụng export và import, bạn có thể chia nhỏ các thành phần chức năng thành các tệp module riêng biệt và ghép nối chúng khi cần. Điều này không chỉ giúp tăng cường cấu trúc mã mà còn giúp phát triển ứng dụng lớn một cách dễ dàng và linh hoạt hơn.