Bộ tạo tsconfig.json

Kết quả

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. 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. 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. 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. 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. 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ếu package.json của bạn có "type": "module", hãy dùng NodeNext cho cả module lẫn moduleResolution.
  • Dùng tsc như 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ằng tsc --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 .ts nó thấy. Cấu hình được tạo luôn ghi include: ["src/**/*"] và loại trừ node_modules cùng dist, 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, isolatedModules hay noEmit rấ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

Công cụ này có phiên bản bằng các ngôn ngữ khác