Cách quản lý các dự án TypeScript bằng tsconfig

Quản lý các dự án TypeScript hiệu quả là rất quan trọng để duy trì chất lượng và tính nhất quán của mã. Tệp tsconfig.json là một phần trung tâm trong việc cấu hình và quản lý các dự án TypeScript. Tệp này cho phép các nhà phát triển chỉ định nhiều tùy chọn trình biên dịch, bao gồm tệp, loại trừ và nhiều hơn nữa. Hướng dẫn này sẽ giải thích cách sử dụng tsconfig.json để quản lý các dự án TypeScript hiệu quả.

Tsconfig.json là gì?

Tệp tsconfig.json là tệp cấu hình được trình biên dịch TypeScript sử dụng (tsc) để xác định cách biên dịch dự án TypeScript. Tệp này cung cấp một cách chuẩn để chỉ định các tùy chọn biên dịch và các tệp là một phần của dự án. Khi tệp tsconfig.json có trong một thư mục, tệp này sẽ đánh dấu thư mục đó là gốc của dự án TypeScript.

Tạo tệp tsconfig.json

Để tạo tệp tsconfig.json, hãy chạy lệnh sau trong terminal:

tsc --init

Lệnh này tạo ra một tệp tsconfig.json mặc định với một tập hợp các tùy chọn được xác định trước. Tệp được tạo ra có thể được tùy chỉnh để phù hợp với nhu cầu cụ thể của dự án.

Hiểu các thuộc tính cơ bản của tsconfig.json

Tệp tsconfig.json chứa một số thuộc tính có thể tùy chỉnh để quản lý dự án TypeScript tốt hơn. Sau đây là một số thuộc tính được sử dụng phổ biến nhất:

• compilerOptions: Chỉ định các tùy chọn biên dịch cho dự án.
• include: Chỉ định các tập tin hoặc thư mục sẽ được đưa vào dự án.
• exclude: Chỉ định các tệp hoặc thư mục sẽ bị loại trừ khỏi dự án.
• files: Chỉ định các tệp riêng lẻ sẽ được đưa vào dự án.

Cấu hình tùy chọn trình biên dịch

Thuộc tính compilerOptions ​​là phần quan trọng nhất trong tệp tsconfig.json. Nó cho phép các nhà phát triển kiểm soát nhiều khía cạnh khác nhau của quá trình biên dịch. Dưới đây là một số tùy chọn biên dịch thường dùng:

{
  "compilerOptions": {
    "target": "ES6",               // Specifies the target JavaScript version
    "module": "commonjs",          // Specifies the module system
    "strict": true,                // Enables all strict type-checking options
    "outDir": "./dist",            // Redirects output structure to the directory
    "rootDir": "./src",            // Specifies the root directory of input files
    "esModuleInterop": true,       // Enables emit interoperability between CommonJS and ES Modules
    "forceConsistentCasingInFileNames": true // Disallows inconsistently-cased references to the same file
  }
}

Các tùy chọn này có thể được tùy chỉnh dựa trên yêu cầu của dự án. Ví dụ, thay đổi target thành ES5 sẽ xuất ra JavaScript tương thích với các trình duyệt cũ hơn.

Bao gồm và loại trừ các tập tin

Trong một dự án TypeScript, điều quan trọng là phải kiểm soát những tệp nào được bao gồm hoặc loại trừ trong quá trình biên dịch. Các thuộc tính include và exclude trong tsconfig.json được sử dụng cho mục đích này.

{
  "include": ["src/**/*"],    // Includes all TypeScript files in the src folder
  "exclude": ["node_modules", "**/*.spec.ts"] // Excludes node_modules and all spec files
}

Cấu hình trên bao gồm tất cả các tệp TypeScript từ thư mục src và các thư mục con của nó trong khi loại trừ các tệp trong thư mục node_modules ​​và các tệp có phần mở rộng .spec.ts.

Sử dụng các tập tin Property

Thuộc tính files ​​được sử dụng để bao gồm các tệp riêng lẻ trong quá trình biên dịch. Điều này có thể hữu ích khi chỉ cần biên dịch một tập hợp tệp cụ thể.

{
  "files": ["src/index.ts", "src/app.ts"]
}

Trong ví dụ này, chỉ có các tệp index.ts ​​và app.ts ​​từ thư mục src sẽ được biên dịch.

Mở rộng tập tin tsconfig

TypeScript cho phép mở rộng các tệp tsconfig.json khác bằng thuộc tính extends. Điều này hữu ích khi chia sẻ cấu hình cơ sở chung trên nhiều dự án hoặc dự án con.

{
  "extends": "./base.tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Trong ví dụ này, tệp tsconfig.json hiện tại mở rộng tệp base.tsconfig.json và ghi đè tùy chọn outDir.

Phần kết luận

Quản lý các dự án TypeScript bằng tsconfig.json cung cấp tính linh hoạt và khả năng kiểm soát tuyệt vời đối với quá trình biên dịch. Bằng cách hiểu và sử dụng các thuộc tính khác nhau của tsconfig.json, chẳng hạn như compilerOptions, include, exclude và files, các dự án TypeScript có thể được quản lý hiệu quả hơn. Khả năng mở rộng các tệp tsconfig cũng cho phép tổ chức dự án và khả năng tái sử dụng tốt hơn.