Modules trong TypeScript

Trong TypeScript, Modules cho phép bạn chia mã nguồn thành các phần nhỏ hơn, dễ quản lý và tái sử dụng. Bạn có thể sử dụng import và export để nhập khẩu và xuất khẩu các thành phần giữa các file khác nhau. Điều này giúp tổ chức mã nguồn hiệu quả hơn, nhất là khi dự án của bạn trở nên lớn.

Bài học này sẽ giúp bạn hiểu cách sử dụng import, export để tổ chức mã nguồn và cấu hình module trong tsconfig.json.

1. Sử dụng import và export để tổ chức mã nguồn

1.1. Export: Xuất khẩu các thành phần từ module

Trong TypeScript, bạn có thể xuất khẩu bất kỳ thành phần nào như biến, hàm, class, hoặc interface từ một module để sử dụng ở nơi khác.

Cách xuất khẩu một thành phần

1. Export theo tên: Bạn có thể sử dụng export để xuất khẩu các thành phần bằng tên.

// person.ts
export class Person {
  constructor(public name: string, public age: number) {}
  
  introduce(): string {
    return `Xin chào, tôi là ${this.name}, ${this.age} tuổi.`;
  }
}

export function greet(name: string): string {
  return `Chào mừng ${name}!`;
}

• Trong file person.ts, chúng ta xuất khẩu một class Person và một hàm greet.

2. Export mặc định (default export): Khi bạn muốn xuất khẩu một thành phần duy nhất từ module, bạn có thể sử dụng export default.

// car.ts
export default class Car {
  constructor(public brand: string, public model: string) {}
  
  drive(): string {
    return `${this.brand} ${this.model} đang chạy!`;
  }
}

• export default chỉ xuất khẩu một thành phần duy nhất và sẽ không cần phải nhập khẩu với tên giống như trong module.

1.2. Import: Nhập khẩu các thành phần từ module khác

Để sử dụng các thành phần đã xuất khẩu từ một module, bạn sẽ sử dụng từ khóa import.

Cách nhập khẩu một thành phần

1. Nhập khẩu theo tên: Bạn có thể nhập khẩu các thành phần đã xuất khẩu theo tên.

// app.ts
import { Person, greet } from './person';

const person = new Person('An', 25);
console.log(person.introduce()); // Output: Xin chào, tôi là An, 25 tuổi.
console.log(greet('Bảo')); // Output: Chào mừng Bảo!

• Trong ví dụ này, chúng ta nhập khẩu Person và greet từ file person.ts.

2. Nhập khẩu mặc định: Khi bạn xuất khẩu một thành phần mặc định, bạn có thể nhập khẩu mà không cần phải sử dụng dấu ngoặc nhọn.

// app.ts
import Car from './car';

const car = new Car('Toyota', 'Camry');
console.log(car.drive()); // Output: Toyota Camry đang chạy!

• Chúng ta nhập khẩu Car từ file car.ts mà không cần sử dụng dấu ngoặc nhọn vì Car được xuất khẩu mặc định.

2. Cấu hình module trong tsconfig.json

Khi làm việc với các module trong TypeScript, bạn cần cấu hình module trong file tsconfig.json. Điều này giúp TypeScript hiểu cách biên dịch mã nguồn và làm việc với các module.

2.1. Các giá trị của module trong tsconfig.json

Trong file tsconfig.json, bạn có thể cấu hình thuộc tính module để chỉ định cách TypeScript sẽ biên dịch mã nguồn của bạn.

{
  "compilerOptions": {
    "module": "commonjs", // hoặc "es6", "amd", "umd", v.v.
    "target": "es6", 
    "moduleResolution": "node"
  }
}

• module: Xác định cách TypeScript sẽ biên dịch mã nguồn và tạo module.

  • commonjs: Phù hợp cho Node.js.
  • es6: Đối với các ứng dụng sử dụng ES6 module.
  • amd, umd: Dành cho các ứng dụng front-end.

• moduleResolution: Chỉ định cách TypeScript sẽ tìm kiếm các file module. node là một lựa chọn phổ biến, đặc biệt khi sử dụng với Node.js.

2.2. Tạo cấu hình cho module với tsconfig.json

Dưới đây là một ví dụ về cấu hình tsconfig.json đơn giản cho một dự án TypeScript sử dụng module ES6.

{
  "compilerOptions": {
    "target": "es6", 
    "module": "es6", // Sử dụng ES6 modules
    "moduleResolution": "node", 
    "outDir": "./dist", 
    "strict": true 
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

• target: Chỉ định phiên bản JavaScript mà bạn muốn biên dịch mã TypeScript thành (ví dụ, es6).
• outDir: Chỉ định thư mục mà các file JavaScript biên dịch sẽ được lưu.
• strict: Bật các kiểm tra nghiêm ngặt để phát hiện lỗi trong mã của bạn.

3. Các ví dụ khác với module

3.1. Sử dụng module trong một dự án thực tế

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

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

// app.ts
import { add, subtract } from './utils';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

• Chúng ta tạo module utils.ts với hai hàm tính toán và nhập khẩu chúng vào app.ts.

4. Tổng kết

• export cho phép xuất khẩu thành phần từ module để có thể sử dụng ở nơi khác.
• import cho phép nhập khẩu thành phần từ module khác vào mã nguồn của bạn.
• Cấu hình module trong tsconfig.json giúp TypeScript hiểu cách biên dịch và xử lý các module của bạn.
  • module: Chọn loại module như commonjs, es6, v.v.
  • moduleResolution: Xác định cách TypeScript sẽ tìm kiếm các file module.

Thông qua việc sử dụng các module, bạn có thể tổ chức mã nguồn dự án TypeScript của mình một cách hiệu quả và dễ quản lý hơn.