tsconfig.json trong Typescript là gì? Ý nghĩa của các cấu hình trong file tsconfig.json

tsconfig.json là tệp cấu hình dành cho TypeScript, một ngôn ngữ lập trình phát triển từ JavaScript. Tệp này được sử dụng để xác định các tùy chọn biên dịch và các cài đặt cấu hình cho dự án TypeScript của bạn.

Dưới đây là một ví dụ cơ bản về một tệp tsconfig.json và giải thích các tùy chọn bên trong:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true,
    "noImplicitAny": false
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Giải thích các tùy chọn trong compilerOptions

1. target: Xác định phiên bản JavaScript mà TypeScript sẽ biên dịch xuống. Ví dụ: “es5”, “es6”, “es2017”, v.v. Ở đây es5 là ES5, một phiên bản của JavaScript.
2. module: Xác định hệ thống module để sử dụng. Ví dụ: “commonjs”, “amd”, “es6”, v.v. Ở đây commonjs là hệ thống module phổ biến trong Node.js.
3. strict: Bật tất cả các kiểm tra nghiêm ngặt. Nếu đặt true, nó sẽ bật tất cả các cài đặt nghiêm ngặt.
4. esModuleInterop: Bật khả năng tương tác với các module ES bằng cách tạo ra các helper cho các imports không mặc định.
5. forceConsistentCasingInFileNames: Buộc phải sử dụng đúng kiểu chữ trong tên tệp khi import.
6. outDir: Thư mục đầu ra cho các tệp biên dịch. Ở đây là ./dist.
7. rootDir: Thư mục gốc của mã nguồn. Ở đây là ./src.
8. skipLibCheck: Bỏ qua việc kiểm tra các tệp khai báo thư viện để tăng tốc độ biên dịch.
9. noImplicitAny: Nếu đặt true, TypeScript sẽ báo lỗi khi một biến có kiểu any ngầm định. Ở đây đặt false để tắt tính năng này.

include và exclude

• include: Danh sách các mẫu tệp để biên dịch. Ở đây, ["src/**/*"] có nghĩa là tất cả các tệp trong thư mục src và các thư mục con của nó.
• exclude: Danh sách các mẫu tệp để loại trừ khỏi biên dịch. Ở đây, ["node_modules", "dist"] có nghĩa là loại trừ thư mục node_modules và dist.

Ví dụ minh họa

Giả sử bạn có cấu trúc thư mục sau:

my-project
│
├── src
│   ├── index.ts
│   └── utils.ts
│
├── dist
│
├── node_modules
│
├── package.json
└── tsconfig.json

Với tsconfig.json như trên, khi bạn chạy lệnh tsc (TypeScript Compiler), các tệp TypeScript trong thư mục src sẽ được biên dịch và kết quả sẽ được đưa vào thư mục dist. Tệp index.ts và utils.ts sẽ được chuyển đổi thành JavaScript và được lưu trong thư mục dist.

Như vậy, tệp tsconfig.json giúp bạn kiểm soát quá trình biên dịch TypeScript và tùy chỉnh các cài đặt cho dự án của bạn.