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

Ms Gao
Module Aliases là gì

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.

Khoá học lập trình microservices với Typescript và Express

1. Module Alias là gì?

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:

Javascript

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:

Javascript

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

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:

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

👍

npm init -y

B2: Import thư viện

✌️

npm install typescript ts-node @types/node @types/express express module-alias @types/module-alias –save

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

🤟

npx tsc –init

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

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

{
  "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é!

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}`);
});

Typescript

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;

Typescript

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

B6: Run project

🖖

npm run start

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:

Exit mobile version