Cách tạo và sử dụng mô-đun TypeScript

Các mô-đun TypeScript cung cấp một phương pháp tiếp cận có cấu trúc để tổ chức và quản lý mã. Các mô-đun cho phép đóng gói mã vào các tệp riêng biệt, giúp tăng cường khả năng bảo trì, khả năng tái sử dụng và khả năng kiểm tra. Hướng dẫn này giải thích quy trình tạo và sử dụng các mô-đun TypeScript.

Mô-đun TypeScript là gì?

Các mô-đun TypeScript là các tệp riêng lẻ xuất và nhập các thành phần mã như lớp, hàm và biến. Bằng cách sử dụng các mô-đun, mã có thể được chia thành các phần có thể quản lý được, tạo điều kiện kiểm soát tốt hơn các tương tác giữa các phần khác nhau của mã.

Tạo một mô-đun TypeScript

Để tạo một mô-đun TypeScript, bạn cần thực hiện theo các bước sau:

1. Tạo tệp TypeScript: Bắt đầu bằng cách tạo tệp `.ts` mới cho mô-đun, chẳng hạn như `mathUtils.ts`.
2. Định nghĩa và xuất mã: Triển khai các hàm, lớp hoặc biến trong tệp này và sử dụng từ khóa export để sử dụng chúng cho các mô-đun khác.

Ví dụ về một mô-đun đơn giản:

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

Trong ví dụ này, các hàm `add` và `subtract` được định nghĩa và xuất từ ​​mô-đun `mathUtils.ts`.

Nhập và sử dụng mô-đun TypeScript

Để sử dụng mã từ mô-đun TypeScript trong tệp khác, bạn phải nhập mã đó. Điều này bao gồm:

1. Tạo một tệp TypeScript mới: Tạo một tệp trong đó mã của mô-đun sẽ được sử dụng, chẳng hạn như `app.ts`.
2. Nhập mô-đun: Sử dụng từ khóa import để đưa các hàm, lớp hoặc biến từ mô-đun vào.

Ví dụ về cách nhập và sử dụng hàm `add` và `subtract`:

// app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

Trong ví dụ này, các hàm `add` và `subtract` được nhập từ mô-đun `mathUtils` và được sử dụng trong tệp `app.ts`.

Xuất mặc định và có tên

Các mô-đun TypeScript hỗ trợ cả xuất mặc định và xuất có tên. Sau đây là tổng quan ngắn gọn:

• Xuất mặc định: Một giá trị duy nhất có thể được xuất làm giá trị xuất mặc định từ một mô-đun bằng cách sử dụng export default.
• Xuất khẩu có tên: Nhiều giá trị có thể được xuất từ ​​một mô-đun bằng cách sử dụng xuất khẩu có tên với từ khóa export.

Ví dụ minh họa cả hai loại xuất khẩu:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

Trong ví dụ này, `Circle` được xuất dưới dạng xuất mặc định, trong khi `getCircleInfo` là xuất có tên.

Tổ chức các mô-đun trong một dự án

Đối với các dự án lớn hơn với nhiều mô-đun, việc tổ chức trở nên rất quan trọng. Hãy cân nhắc các mẹo sau:

• Cấu trúc thư mục: Nhóm các mô-đun liên quan vào các thư mục như `models/`, `services/` và `utils/`.
• Tệp chỉ mục: Sử dụng tệp `index.ts` trong thư mục để tổng hợp và xuất lại các mô-đun, giúp đơn giản hóa quá trình nhập trên toàn bộ dự án.

Cấu trúc thư mục ví dụ:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

Phần kết luận

Các mô-đun TypeScript là một tính năng chính để tổ chức và quản lý mã. Bằng cách tạo và sử dụng các mô-đun, mã có thể được giữ theo dạng mô-đun, có thể bảo trì và có thể mở rộng. Hiểu cách xuất và nhập mã, cũng như cách cấu trúc một dự án, giúp tăng cường hiệu quả phát triển TypeScript.