Đã đăng vào Chủ Nhật, 4:56 SA 3 phút đọc

Cách cấu hình tsconfig.json trong TS | TypeScript Series

1. `tsconfig.json` là gì?

Đây là file cấu hình trung tâm của TypeScript compiler (tsc).

Nó nói cho TypeScript biết cách build dự án của bạn.

Khi trong thư mục có tsconfig.json, chỉ cần gõ:

tsc

là nó tự động hiểu phải build cái gì, build ra đâu, và theo quy tắc nào.

2. Cấu trúc cơ bản của `tsconfig.json`

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Thuộc tính	Ý nghĩa
`target`	Biên dịch TypeScript sang phiên bản JS nào (vd: ES5, ES6, ES2020…)
`module`	Hệ thống module xuất ra (CommonJS, ESNext, AMD, …)
`outDir`	Thư mục output sau khi build (vd: `dist`)
`rootDir`	Nơi chứa code gốc TypeScript (vd: `src`)
`strict`	Bật toàn bộ các kiểm tra type nghiêm ngặt
`esModuleInterop`	Cho phép import/export linh hoạt giữa CommonJS và ES Modules
`include`	File hoặc folder nào cần compile
`exclude`	Loại trừ file/folder không compile (thường là `node_modules`)

3. Ví dụ thực tế

Giả sử bạn có dự án Node.js như sau:

project/
 ├─ src/
 │   ├─ index.ts
 │   └─ utils/helper.ts
 ├─ package.json
 └─ tsconfig.json

Bạn setup tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Khi bạn chạy:

npx tsc

Nó sẽ compile mọi file .ts trong src sang .js trong dist:

dist/
 ├─ index.js
 └─ utils/helper.js

4. Một số option hay dùng (nên biết)

Option	Giải thích
`"baseUrl"`	Thiết lập gốc để import module (vd: `@/utils` thay vì `../../utils`)
`"paths"`	Tạo alias cho import (vd: `"@utils/": ["src/utils/"]`)
`"noImplicitAny"`	Cấm dùng biến mà không có type rõ ràng
`"skipLibCheck"`	Bỏ qua check type trong thư viện (cho build nhanh hơn)
`"forceConsistentCasingInFileNames"`	Ép import đúng kiểu chữ (tránh lỗi giữa Windows/Linux)
`"resolveJsonModule"`	Cho phép import file `.json` trực tiếp
`"allowJs"`	Cho phép compile cả file `.js` chung với `.ts`
`"declaration"`	Tạo file `.d.ts` (type definition) khi build — hữu ích nếu bạn xuất package npm

5. `extends` và `references`

Nếu bạn có nhiều dự án con (monorepo) hoặc muốn chia config:

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "dist"
  },
  "include": ["src"]
}

→ extends cho phép kế thừa cấu hình chung từ file khác.

references thì dùng để liên kết giữa nhiều project TypeScript (kiểu module phụ thuộc module khác). Dùng cho codebase lớn.

6. Một số tips thực tế

Tạo file mặc định nhanh:
```
npx tsc --init
```
→ nó sẽ sinh ra file tsconfig.json với toàn bộ tùy chọn chú thích.
Khi code backend Node.js → module: "CommonJS", target: "ES2020".
Khi code frontend (React, Next.js, etc.) → module: "ESNext", jsx: "react-jsx".
Khi bạn dùng ts-node (chạy TS trực tiếp mà không build) → vẫn cần tsconfig.json để định nghĩa module system và type resolution.

7. Tóm tắt

tsconfig.json = Bộ luật cho compiler TypeScript.

Nó quyết định “compile cái gì, compile ra đâu, và compile như thế nào”.

Hiểu nó = kiểm soát toàn bộ hành vi của TypeScript trong dự án.

Cấu hình đúng = code sạch, dễ maintain, không lỗi linh tinh khi build.

advanced typescript Tìm hiểu cơ bản về TypeScript

1. tsconfig.json là gì?

2. Cấu trúc cơ bản của tsconfig.json