Bộ tạo tsconfig.json
tsconfig.json có tới hơn một trăm tùy chọn trình biên dịch, và mỗi bài hướng dẫn TypeScript lại trình bày một tổ hợp khác nhau. Công cụ này chỉ tập trung vào những tùy chọn quan trọng với đa số dự án: target, module, moduleResolution, jsx, các cờ boolean thông dụng (strict, esModuleInterop, skipLibCheck và đồng bọn) cùng hai thư mục outDir/rootDir. Bản xem trước tsconfig.json cập nhật trực tiếp mỗi khi bạn đổi tùy chọn; sao chép vào thư mục gốc dự án là bạn có ngay một cấu hình sạch, không kèm các tùy chọn chết mà đa số boilerplate hay mang theo.
Cách cấu hình được xây dựng
-
1
Chọn target và module
Phiên bản JavaScript mà tsc xuất ra (từ ES2015 đến ES2023, hoặc ESNext) và hệ thống module (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).
-
2
Đặt moduleResolution và JSX
bundler cho dự án Vite/webpack, node16/nodenext cho Node hiện đại, node hoặc classic cho hệ thống cũ. Đặt jsx thành react-jsx cho React hiện đại, hoặc để none để bỏ hẳn khóa này.
-
3
Bật tắt các cờ
strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap và forceConsistentCasingInFileNames dưới dạng các ô đánh dấu đơn giản.
-
4
Đặt thư mục
outDir và rootDir, điền sẵn ./dist và ./src. include và exclude cố định là src/**/* cùng node_modules và dist.
-
5
Sao chép tsconfig được tạo
Bản xem trước JSON cập nhật trực tiếp; một cú nhấp là sao chép xong, sẵn sàng đặt vào thư mục gốc dự án với tên tsconfig.json.
Những tùy chọn công cụ này ghi ra
| Tùy chọn | Mặc định ở đây | Tác dụng |
|---|---|---|
target |
ES2022 |
Phiên bản JavaScript của mã xuất ra. ES2022 an toàn với trình duyệt và Node hiện tại; chỉ chọn target cũ hơn cho môi trường cũ. |
module |
ESNext |
Cú pháp module của đầu ra. Dùng NodeNext/Node16 cho dự án Node chạy ESM, CommonJS cho Node đời cũ. |
moduleResolution |
node |
Cách tìm các import. Ưu tiên bundler khi dùng Vite/webpack/esbuild và node16/nodenext với Node hiện đại; node (node10) là hành vi kiểu cũ. |
jsx |
không ghi | Chỉ được ghi khi bạn chọn một chế độ. react-jsx cho React 17+, preserve khi bundler đảm nhận việc biến đổi JSX. |
strict |
true |
Bật cả họ kiểm tra strict. Hãy giữ bật với dự án mới. |
esModuleInterop |
true |
Sửa lỗi import mặc định từ các gói CommonJS. |
skipLibCheck |
true |
Bỏ qua kiểm tra kiểu trong các tệp .d.ts; biên dịch nhanh hơn hẳn, hiếm khi che giấu lỗi thật. |
forceConsistentCasingInFileNames |
true |
Từ chối import viết hoa thường khác với tệp trên đĩa (lỗi kinh điển khi chuyển từ macOS sang Linux). |
resolveJsonModule |
true |
Cho phép import data from "./data.json". |
allowJs |
false |
Cho tệp .js tham gia biên dịch; hữu ích giữa chừng quá trình chuyển đổi. |
declaration |
false |
Xuất các tệp .d.ts; bật khi phát hành thư viện. |
sourceMap |
false |
Xuất các tệp .js.map phục vụ gỡ lỗi. |
outDir / rootDir |
./dist / ./src |
Nơi chứa mã đã biên dịch và nơi đặt mã nguồn. |
baseUrl |
"." |
Luôn được ghi, để khối paths bạn thêm thủ công được phân giải từ thư mục gốc dự án. |
Đầu ra mặc định chính xác
Không chạm vào bất kỳ điều khiển nào, bạn sẽ nhận đúng tệp này:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"allowJs": false,
"declaration": false,
"sourceMap": false,
"outDir": "./dist",
"rootDir": "./src",
"baseUrl": "."
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
Chọn một chế độ jsx khác none thì mục "jsx" sẽ được thêm vào compilerOptions.
Chế độ strict thực sự bật những gì
strict: true là cờ tổng bật cả họ kiểm tra strict, bao gồm noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables và alwaysStrict. Dự án mới nên bắt đầu với tất cả đều bật: bổ sung độ nghiêm ngặt về sau rất cực.
Lỗi thường gặp
- Đặt
module: "CommonJS"cho dự án Node chạy ESM. Nếupackage.jsoncủa bạn có"type": "module", hãy dùngNodeNextcho cảmodulelẫnmoduleResolution. - Dùng
tscnhư một bundler. Nó là trình biên dịch kiêm trình kiểm tra kiểu. Hãy build bằng Vite/esbuild/SWC và kiểm tra kiểu bằngtsc --noEmit. - Biên dịch tất cả mọi thứ. Không có danh sách
include, TypeScript sẽ gom mọi tệp.tsnó thấy. Cấu hình được tạo luôn ghiinclude: ["src/**/*"]và loại trừnode_modulescùngdist, nên bạn yên tâm. - Cần nhiều hơn những gì cấu hình cung cấp. Công cụ này cố ý giữ tối giản. Các tùy chọn như
lib,paths,isolatedModuleshaynoEmitrất dễ thêm thủ công khi tệp nền đã sẵn sàng.
Câu hỏi thường gặp
Với monorepo và dự án nhiều gói thì nên: một tệp gốc chứa các tùy chọn chung, mỗi gói kế thừa qua “extends”. Với kho chỉ có một dự án, một tsconfig.json duy nhất như tệp được tạo sẽ đơn giản hơn.
Ra mắt trong TypeScript 5.0 cho các dự án build bằng Vite, webpack hoặc esbuild. Nó phản ánh đúng cách bundler phân giải import trong thực tế, không áp quy tắc phần mở rộng tệp ESM của node16/nodenext. Với mã do Node chạy trực tiếp, hãy ưu tiên node16 hoặc nodenext.
Không có ô điều khiển riêng. Nhưng tệp được tạo luôn đặt baseUrl là “.”, nên bạn có thể dán một khối paths ngay bên dưới, ví dụ “@/*”: [“src/*”], và nó sẽ được phân giải từ thư mục gốc dự án.
Thường là không, và đó là lý do công cụ này bỏ qua nó: target đã ngầm định bộ kiểu thư viện tương ứng. Chỉ ghi đè lib thủ công trong trường hợp đặc biệt, chẳng hạn cần API DOM trong dự án Node hoặc kiểu WebWorker.
Không cần đăng ký và không có gì được lưu. Lựa chọn của bạn chỉ dùng để hiển thị bản xem trước cấu hình; ở chế độ xem từng bước, chúng còn đi kèm trong URL của trang, giúp bạn dễ đánh dấu hoặc chia sẻ một cấu hình hoàn chỉnh.
Công cụ liên quan
Bảng tham chiếu ASCII
Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.
Tham chiếu ký tự HTML
Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.
Bảng tham khảo phím tắt
Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.
Trình giải mã mã JavaScript (JavaScript Deobfuscator)
Giải mã mã JavaScript đã được rút gọn hoặc nén bằng cách đổi tên biến, giải mã chuỗi và mảng, đảo ngược cấu trúc dòng điều khiển và làm đẹp mã.
Chuyển đổi HTML sang BBCode
Chuyển đổi các đoạn mã HTML thành BBCode dành cho phpBB, vBulletin và các phần mềm diễn đàn khác không hỗ trợ định dạng HTML thô.
Trình chuyển ASCII sang Hex
Biến văn bản ASCII thành giá trị byte thập lục phân. Đầu ra dùng hai chữ số hex cho mỗi ký tự, sẵn sàng cho memory dump, packet trace hoặc bảng firmware.
Công cụ này có phiên bản bằng các ngôn ngữ khác
- Generator tsconfig.json [ID]
- Generator tsconfig.json [PL]
- tsconfig.json-generator [SV]
- เครื่องมือสร้างไฟล์ tsconfig.json [TH]
- tsconfig.json-Generator [DE]
- tsconfig.json ジェネレーター [JA]
- tsconfig.json 생성기 [KO]
- Generador de tsconfig.json [ES]
- Gerador de tsconfig.json [PT]
- Générateur de tsconfig.json [FR]
- مولد ملف tsconfig.json [AR]
- Tsconfig.json-generator [NL]
- tsconfig.json Generator [EN]
- Generatore tsconfig.json [IT]
- Генератор tsconfig.json [RU]
- tsconfig.json Üretici [TR]
- tsconfig.json 生成器 [ZH]