TypeScript Alias Configuration for Project

Hello all,

Để tiếp tục chuyên mục TypeScript cho người mới bắt đầu, ta sẽ qua 1 cái quan trọng mà ko thể thiếu: Alias Configuration.

Nếu bạn nào đã từng làm việc với Webpack, thì các bạn sẽ biết ngay mình nói cái gì 😀

1/ Problems appear in the world without Alias Configuration

Trong project của bạn, tất nhiên cấu trúc nó rất là vô cùng và tùy theo hứng của người tạo. Ví dụ mình hay tạo structure như sau:

• src
  • controllers
    • module_a
      • …
    • modube_b
      • …
  • libraries
  • models
    • …
  • components
  • views
  • …

Vậy nên ví dụ ta có UserController nằm trong controllers và muốn sử dụng model User, mình fải import như sau:

import { User } from '../models/User'

Vậy nên nếu sau này nhiều folder, đường đi ra lại càng dài,… việc này nó dẫn tới code của bạn vừa xấu mà vừa có vấn đề khi move file ra chỗ khác, refactoring,… đủ thứ vấn đề trên đời 😀

import { User } from "../../models/User"
import { AbcXyz } from "../../libraries/AbcXyz"

Để giảm thiểu việc đó, Alias đã dc ra đời để mình đặt ra rules, và cuối cùng mình sẽ dc đại loại vầy:

Rất đơn giản mà lại clean fải ko nào 😀

2/ Solution – TypeScript Alias Configuration

Với Webpack, các bạn sẽ có file webpack.config.js hay gì gì gì tương tự để các bạn tự register vào.

Đối với TypeScript, đây là 1 configuration trong tsconfig.conf. Mở tsconfig.conf ra và define như sau:

{
    ....
    "paths": {
      "@src/*": ["src/*"],
      "@models/*": ["src/models/*"],
      "@controllers/*": ["src/controllers/*"]
    }

    ...
}

Cụ thể chỉ là: “Alias Name” => “Mapped Folder”

Rebuild project và bạn sẽ sử dụng dc những alias đã tạo ra 😀 Bạn có thể tạo thêm nếu bạn muốn

import { User } from "@models/User"

import { SuperHandler } from "@src/libraries/SuperHandlerSethPhat"

...

3/ Happy Ending – TypeScript Alias Configuration

Đây là 1 configuration tuy đơn giản mà đem lại cho ta khá nhiều advantages. Lưu ý và sử dụng nhé 😀

Thanks for watching.