Hiểu về Module Alias trong Typescript. Tại sao phải dùng Alias?

Trong bài viết này, mình sẽ giải thích lý do vì sao nên sử dụng Module Alias và hướng dẫn bạn set up vào dự án Typescript của bạn.

1. Module Alias là gì?

• Module Alias trong TypeScript là cách dùng để định nghĩa các tên thay thế (alias), cho những đường dẫn đến tệp, hoặc thư mục trong dự án của bạn.
• Ví dụ, thay vì bạn import với một đường dẫn dài như ../../../../../utils/helpers, thì bạn hoàn toàn có thể sử dụng @utils/helpers để thay thế.

2. Tại sao bạn nên sử dụng Module Alias vào dự án?

Hãy thử hình dung bạn đang trong các dự án phần mềm lớn chia làm nhiều tầng thư mục, việc bạn phải gặp rất nhiều những đoạn import như thế này:

import MyComponent from '../../../../../../../MyComponent'

Vô tình có thể sẽ khiến cho dự án của bạn trở nên phức tạp, khó đọc và khó bảo trì.

Nhưng nếu bạn thay đổi đoạn import trên thành như thế này:

import MyComponent from '@MyComponent'

Bạn sẽ thấy mã nguồn của bạn trở nên dễ đọc hơn, đặc biệt là khi bạn có nhiều tầng thư mục. Bên cạnh đó, bạn sẽ dễ dàng tái cấu trúc thư mục của dự án, mà không phải sửa đổi quá nhiều nơi trong source code.

3. Lợi ích khi sử dụng Path Alias

• Tái cấu trúc: Khi bạn thay đổi cấu trúc thư mục của dự án, với alias bạn không cần phải vào thay đổi nhiều file code.
• Dễ bảo trì: Alias giúp code bạn rõ ràng, dễ dàng theo dõi, bảo trì, đặc biệt là khi dự án phân thành nhiều tầng thư mục.
• Tránh nhầm lẫn: Giảm thiểu rủi ro, nhầm lẫn giữa các tệp tin và thư mục, đặc biệt khi cấu trúc thư mục phức tạp.
• Cải thiện hiệu suất: Alias giúp truy cập nhanh chóng vào các tệp tin và thư mục, giảm thời gian tìm kiếm, tăng hiệu suất làm việc.

4. Hướng dẫn config module alias với typescript

Một vài lưu ý trước khi mình đi vào hướng dẫn:

• Project này mình sẽ sử dụng module-alias để thuận tiện. Bạn sẽ đặt câu hỏi vậy có cách nào không sử dụng library không.
• Câu trả lời là có nhé. Bạn có thể sử dụng tsconfig.json để hỗ trợ việc alias trực tiếp trong quá trình chạy với ts-node, nhưng bạn sẽ phải thực hiện việc build trước.

B1: Khởi tạo dự án Nodejs

B2: Import thư viện

B3: Khởi tạo file cấu hình tsconfig.json

B4: Thêm phần config vào tsconfig.json và package.json

• tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,
    "strict": true,                        
    "skipLibCheck": true,
    "baseUrl": "./src",
    "paths": {
      "@/*":["*"],
      "@controllers/*": ["controllers/*"],
      "@models/*": ["models/*"],
      "@utils/*": ["utils/*"]
    },  
  },
}

• package.json

{
  "name": "200Lab-module-aliases",
  "version": "1.0.0",
  "main": "src/index.ts",
  "license": "MIT",
  "_moduleAliases": {
    "@root": ".",
    "@controllers": "src/controllers",
    "@models": "src/models",
    "@utils": "src/utils"
  },
  "scripts": {
    "start": "ts-node src/index.ts"
  },
  "dependencies": {
      "@types/express": "^4.17.21",
      "@types/module-alias": "^2.0.4",
      "@types/node": "^22.1.0",
      "express": "^4.19.2",
      "module-alias": "^2.2.3",
      "ts-node": "^10.9.2",
      "typescript": "^5.5.4"
  }
}

B5: Mình sẽ tạo một project đơn giản để demo cho các bạn hình dung rõ hơn nhé!

• src/index.ts:

import 'module-alias/register';
import express from 'express';
import { userController } from '@controllers/userController';

const app = express();
const port = 3000;

app.use('/', (req, res) => {
  res.send('200Lab Server Demo Module Alias');
});

app.use('/users', userController);

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

• src/controllers/userController.ts

import { Router } from 'express';
import { getUser } from '@models/userModel';

const router = Router();

router.get('/', (req, res) => {
  const user = getUser();
  res.json({ code: 200, message: 'Success', data: user });
});

export const userController = router;

• src/models/userModel.ts

export const getUser = () => {
  return { id: 1, name: '200Lab' };
};

B6: Run project

5. Một vài điểm cần chú ý khi sử dụng Module Alias

Với những hướng dẫn trên mong rằng set up alias sẽ không còn là mối lo lắng của bạn, nhưng bên cạnh đó, bạn phải chú ý những điều sau:

1. Đảm bảo cấu hình của các công cụ phát triển như: Webpack, Babel, Typescript, Jest,... đều được đồng bộ. Ví dụ như nếu bạn cấu hình Alias trong file tsconfig nhưng lại quên cấu hình trong Webpack, bạn có thể sẽ gặp lỗi.
2. Với dự án làm việc nhóm, hãy chắc rằng tất cả thành viên trong team hiểu về Module Alias, để đảm bảo nhất quán, hiệu quả khi build project.
3. Nếu bạn cấu hình Module Alias chưa được hợp lý, sẽ ảnh hưởng đến hiệu suất khi biên dịch.

6. Kết luận

Hy vọng rằng bạn đã hiểu được tầm quan trọng của Module Aliase trong dự án. Thông qua việc hướng dẫn chi tiết và một số điểm cần lưu ý sẽ giúp bạn phần nào trong việc cải thiện dự án của mình.

Một số các bài viết với các chủ đề đang được quan tâm nhiều tại blog 200Lab:

• NodeJS là gì? Tại sao NodeJS lại phổ biến
• NestJS: Giải Pháp Toàn Diện Cho Ứng Dụng Server-Side
• Backend cơ bản: API là gì?
• REST API là gì? Cách thiết kế RESTful API bạn chưa biết
• Các dạng câu hỏi phổ biến trong phỏng vấn lập trình backend