TypeScript - tsconfig.json: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, tương lai của ngôi sao lập trình! ? Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của TypeScript và người bạn trung thành của nó, tệp tsconfig.json. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau vượt qua điều này, từng bước một.

TypeScript - tsconfig.json

tsconfig.json là gì?

Trước khi chúng ta bắt đầu, hãy nói về tsconfig.json thực sự là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (dự án TypeScript của bạn). Tệp tsconfig.json giống như bản vẽ của ngôi nhà bạn. Nó告诉 TypeScript cách bạn muốn dự án của mình được xây dựng, những tính năng bạn muốn sử dụng, và bạn muốn các quy tắc nghiêm ngặt như thế nào.

Cấu trúc cơ bản của tệp tsconfig.json

Bây giờ, hãy nhìn vào cấu trúc cơ bản của một tệp tsconfig.json. Nó được viết bằng định dạng JSON, một cách tổ chức dữ liệu mà cả con người và máy tính đều có thể dễ dàng hiểu.

Dưới đây là một ví dụ đơn giản:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Hãy phân tích này:

Toàn bộ tệp được bao quanh bởi dấu ngoặccurly {}.
Bên trong, chúng ta có các phần khác nhau như compilerOptions, include, và exclude.
Mỗi phần chứa các thiết lập cụ thể.

CompilerOptions

Phần compilerOptions là nơi xảy ra phép màu. Nó giống như nói với đầu bếp (bộ biên dịch TypeScript) cách bạn muốn món ăn (mã) của mình được chế biến. Hãy nhìn vào một số tùy chọn phổ biến:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

Hãy giải thích từng phần của chúng:

target: Điều này nói với TypeScript phiên bản JavaScript nào để biên dịch đến. "es5" được hỗ trợ rộng rãi bởi các trình duyệt.
module: Điều này chỉ định hệ thống module nào để sử dụng. "commonjs" thường được sử dụng cho các dự án Node.js.
strict: Khi đặt thành true, nó启用 một bộ các tùy chọn kiểm tra loại nghiêm ngặt.
outDir: Đây là nơi TypeScript sẽ đặt các tệp JavaScript đã biên dịch.
rootDir: Đây là nơi TypeScript nên tìm kiếm các tệp nguồn của bạn.
sourceMap: Khi true, nó tạo ra các tệp bản đồ nguồn, rất hữu ích cho việc gỡ lỗi.

Include và Exclude

Các phần include và exclude nói với TypeScript哪些文件 để biên dịch và哪些 để bỏ qua:

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

include: Điều này nói với TypeScript biên dịch tất cả các tệp trong thư mục src và các thư mục con của nó.
exclude: Điều này nói với TypeScript bỏ qua thư mục node_modules và bất kỳ tệp nào kết thúc bằng .spec.ts (thường được sử dụng cho các tệp kiểm thử).

Các tình huống và cấu hình phổ biến

Bây giờ chúng ta đã hiểu các основы, hãy nhìn vào một số tình huống phổ biến bạn có thể gặp phải và cách cấu hình tsconfig.json cho chúng.

Tình huống 1: Dự án React

Nếu bạn đang làm việc trên một dự án React, bạn có thể muốn một cấu hình như này:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Cấu hình này được tối ưu hóa cho phát triển React. Nó cho phép bạn sử dụng JSX,启用 kiểm tra loại nghiêm ngặt, và thiết lập giải quyết module cho cấu trúc dự án React điển hình.

Tình huống 2: Dự án Backend Node.js

Đối với một dự án backend Node.js, bạn có thể sử dụng cấu hình như này:

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

Cấu hình này phù hợp cho một dự án backend Node.js. Nó biên dịch đến một phiên bản mới hơn của JavaScript (ES2018), sử dụng module CommonJS, và thiết lập thư mục đầu vào và đầu ra.

Các tùy chọn hữu ích của tsconfig.json

Dưới đây là bảng các tùy chọn hữu ích của tsconfig.json mà bạn có thể muốn sử dụng:

Tùy chọn	Mô tả
`noImplicitAny`	Nâng cấp lỗi trên các biểu thức và khai báo có loại 'any' ngầm
`strictNullChecks`	Bật kiểm tra null nghiêm ngặt
`strictFunctionTypes`	Bật kiểm tra loại hàm nghiêm ngặt
`strictBindCallApply`	Bật 'bind', 'call', và 'apply' nghiêm ngặt trên các hàm
`noUnusedLocals`	Báo lỗi trên các biến chưa sử dụng
`noUnusedParameters`	Báo lỗi trên các tham số chưa sử dụng
`noImplicitReturns`	Báo lỗi khi không phải tất cả các đường mã trong hàm trả về một giá trị
`noFallthroughCasesInSwitch`	Báo lỗi cho các trường hợp fallthrough trong câu lệnh switch

Nhớ rằng bạn luôn có thể tham khảo tài liệu chính thức của TypeScript để biết đầy đủ các tùy chọn và mô tả của chúng.

Kết luận

Và thế là bạn đã có nó, học viên lập trình của tôi! Chúng ta đã cùng nhau hành trình qua vùng đất của tsconfig.json, từ cấu trúc cơ bản đến các tình huống và tùy chọn phổ biến. Nhớ rằng tsconfig.json giống như một cây đa-purpose cho các dự án TypeScript của bạn - nó rất linh hoạt và có thể tùy chỉnh để phù hợp với nhu cầu cụ thể của bạn.

Khi bạn tiếp tục hành trình TypeScript của mình, đừng ngần ngại thử nghiệm với các cấu hình khác nhau. Mỗi dự án có thể đòi hỏi một thiết lập hơi khác, và đó là bình thường! Càng chơi với tsconfig.json, bạn sẽ càng thoải mái với sức mạnh của nó.

Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Đến gặp lại, chúc bạn có các loại mạnh mẽ và ít lỗi hơn. Chúc mừng TypeScripting! ??‍??‍?

Credits: Image by storyset

Hướng Dẫn Trước:

TypeScript - Đóng hộp và Mở hộp

Hướng Dẫn Tiếp Theo:

Từ JavaScript sang TypeScript