TypeScript và tsconfig.json
Bài viết này giải thích về TypeScript và tsconfig.json.
Bắt đầu từ vai trò cơ bản của TypeScript, chúng tôi sẽ giải thích cùng với ví dụ cụ thể về cách tsconfig.json hoạt động trong một dự án.
YouTube Video
TypeScript và tsconfig.json
TypeScript là 'JavaScript có kiểu dữ liệu'. Tuy nhiên, để sử dụng TypeScript một cách hiệu quả trong các dự án thực tế, điều quan trọng là hiểu đúng về tsconfig.json và cấu hình nó một cách chủ ý.
Tại sao chúng ta cần TypeScript?
Đầu tiên, lý do chính để sử dụng TypeScript là 'có thể phát hiện lỗi trước khi thực thi.'.
1function add(a: number, b: number): number {
2 return a + b;
3}
4
5add(1, "2");Đoạn mã này sẽ không gây ra lỗi trong JavaScript cho đến khi chạy, nhưng với TypeScript nó sẽ báo lỗi kiểu dữ liệu khi biên dịch.
Việc 'phát hiện sớm' này cải thiện đáng kể hiệu suất và chất lượng phát triển.
TypeScript được thực thi như thế nào?
Về nguyên tắc, TypeScript không thể thực thi trực tiếp. Bạn cần chuyển đổi nó sang JavaScript bằng trình biên dịch tsc (TypeScript Compiler)..
1npm install -D typescript
2npx tsc --init- Khi thực hiện thao tác này,
tsconfig.jsonsẽ được tạo ra, trở thành tệp trung tâm xác định hành vi của dự án TypeScript.
Vai trò của tsconfig.json là gì?
tsconfig.json là tệp cấu hình quyết định 'những tệp nào', 'theo quy tắc nào', và 'cách chuyển đổi chúng ra sao.'. Mặc dù ban đầu có vẻ phức tạp, nhưng chỉ có một vài thiết lập là thực sự quan trọng.
1{
2 "compilerOptions": {
3 "target": "ES2020",
4 "module": "ESNext",
5 "strict": true
6 }
7}- Chỉ với các thiết lập này, việc phát triển TypeScript hiện đại và an toàn là hoàn toàn khả thi.
target: Phiên bản JavaScript cần xuất ra
target xác định mức độ tiêu chuẩn hóa của JavaScript đầu ra.
1"target": "ES2020"Với thiết lập này, TypeScript sẽ xuất ra JavaScript tương đương ES2020. Đối với môi trường cũ, chọn ES5; nếu chỉ dùng môi trường mới nhất, chọn ES2022, v.v.
Khi chỉ định ESNext
1"target": "ESNext"-
ESNextchỉ định xuất cú pháp JavaScript mới nhất hiện có như nguyên bản. TypeScript sẽ không chuyển đổi cú pháp mà để cho môi trường thực thi như Node.js hoặc trình duyệt xử lý. -
Vì vậy,
ESNextphù hợp khi chỉ hướng tới Node.js mới nhất hoặc khi bạn sử dụng Babel hay bundler để chuyển đổi riêng. Ngược lại, nếu môi trường thực thi không hỗ trợ cú pháp mới nhất, có thể xảy ra lỗi khi chạy, vì vậy cần cẩn thận.
module: Chỉ định định dạng module
module xác định định dạng module.
1"module": "ESNext"ESNextlà tiêu chuẩn trong các môi trường frontend và Node.js hiện đại.- Chỉ chọn
"CommonJS"nếu bạn cần sử dụng CommonJS.
strict: Tối đa hóa an toàn kiểu dữ liệu
strict là công tắc để tối đa hóa sự an toàn của TypeScript.
1"strict": true- Kích hoạt tùy chọn này sẽ phát hiện các kiểu dữ liệu không rõ ràng và lỗi tiềm ẩn.
strict mode và kiểu any ngầm định
Khi bạn bật strict, TypeScript coi các biến không xác định được kiểu là lỗi.
1function printValue(value) {
2 console.log(value);
3}- Biến
valuenày không có thông tin kiểu dữ liệu khi khai báo, nên TypeScript không thể xác định kiểu của nó. Do đó, kiểuanysẽ được dùng ngầm định, điều này sẽ gây cảnh báo (lỗi) trong chế độstrict.
1function printValue(value: number) {
2 console.log(value);
3}- Bằng cách chỉ rõ kiểu dữ liệu như thế này, TypeScript có thể hiểu rằng 'biến này chỉ dùng để xử lý số.'. Trong TypeScript, điều quan trọng hơn là kiểu dữ liệu có thể xác định một cách duy nhất chứ không phải có thể bỏ qua kiểu dữ liệu.
include/exclude: Kiểm soát các tệp sẽ được biên dịch
Trong tsconfig.json, bạn có thể chỉ định các tệp sẽ được bao gồm và các tệp sẽ bị loại trừ khỏi quá trình biên dịch.
1{
2 "include": ["src"],
3 "exclude": ["node_modules"]
4}- Với thiết lập này, chỉ các tệp trong
srcmới được TypeScript quản lý. node_modulesđược chỉ định trongexcludesẽ bị loại khỏi quá trình biên dịch, ngay cả khi nó nằm trong đường dẫn đượcincludebao gồm.
outDir: Chỉ định thư mục đầu ra
Chỉ định outDir để quản lý vị trí xuất kết quả biên dịch.
1"outDir": "dist"- Với thiết lập này, tất cả kết quả biên dịch sẽ được xuất vào thư mục
dist. Trên thực tế, tách riêng mã nguồn với các tệp build là tiêu chuẩn.
rootDir: Chỉ định thư mục mã nguồn
rootDir chỉ định thư mục mà TypeScript coi là gốc mã nguồn.
1"rootDir": "src"-
Cài đặt này cho phép TypeScript giữ nguyên cấu trúc thư mục dựa trên
srckhi xuất file. Ví dụ,src/index.tssẽ được xuất thànhdist/index.js. -
Cấu trúc thư mục được chỉ định trong
rootDirsẽ được tái tạo trongoutDir.
esModuleInterop: Kết nối giữa CommonJS và ES Modules
Tiếp theo, hãy cùng tìm hiểu về esModuleInterop.
1"esModuleInterop": true- Nếu bật tùy chọn này, bạn có thể sử dụng các module CommonJS với cú pháp
importmột cách an toàn.
1import fs from "fs";- Thiết lập này là gần như bắt buộc khi sử dụng Node.js.
noImplicitAny: Ngăn ngừa kiểu 'any' ngầm định
Việc tăng cường kiểm tra kiểu dữ liệu trong tsconfig.json cũng rất quan trọng.
1"noImplicitAny": true- Với thiết lập này, bạn có thể ngăn việc sử dụng kiểu
anyngầm định. Nhờ đó, bạn có thể phát hiện chính xác các vị trí mà bạn quên khai báo kiểu dữ liệu.
Cấu hình để phát hiện mã không sử dụng
Các thiết lập phát hiện mã không sử dụng cũng hữu ích giúp cải thiện khả năng bảo trì.
1"noUnusedLocals": true,
2"noUnusedParameters": true- Với thiết lập này, các biến và tham số không cần thiết sẽ được cảnh báo ngay lập tức.
lib: Định nghĩa các API tích hợp sẵn có thể sử dụng
lib là thiết lập chỉ định các API tiêu chuẩn mà TypeScript giả định là đã có sẵn.
1"lib": ["ES2020", "DOM"]- Với thiết lập này, các kiểu sau sẽ có sẵn:.
Với
ES2020, các tính năng hiện đại nhưPromise,MapvàSetsẽ khả dụng. VớiDOM, các API của trình duyệt nhưdocument,windowvàHTMLElementsẽ khả dụng.
Ở frontend, hãy thêm DOM; còn với dự án chỉ sử dụng Node.js, hãy loại bỏ DOM để tránh đưa vào các kiểu toàn cục không cần thiết.
moduleResolution: Quy tắc tra cứu module
moduleResolution quyết định cách các module trong câu lệnh import được xác định.
1"moduleResolution": "Node"Hai tùy chọn chính như sau:.
- Nếu bạn chỉ định
Node, các quy tắc xác định module của Node.js sẽ được sử dụng. Classiclà phương pháp cũ dành riêng cho TypeScript, nhưng ngày nay hiếm khi sử dụng.
Trong các môi trường sử dụng Node.js hoặc bundler, nên chỉ định rõ ràng Node.
Một tsconfig.json tối giản, sẵn sàng cho sản xuất
Dựa trên những gì chúng ta đã tìm hiểu, một tsconfig.json tối giản, sẵn sàng cho sản xuất sẽ có dạng như sau:.
1{
2 "compilerOptions": {
3 "target": "ES2020",
4 "module": "ESNext",
5 "moduleResolution": "Node",
6 "lib": ["ES2020", "DOM"],
7 "strict": true,
8 "rootDir": "src",
9 "outDir": "dist",
10 "esModuleInterop": true,
11 "noImplicitAny": true,
12 "noUnusedLocals": true,
13 "noUnusedParameters": true
14 },
15 "include": ["src"]
16}Cấu hình này cung cấp nền tảng an toàn cho cả dự án frontend và Node.js.
Tổng kết: tsconfig.json là một 'bộ quy tắc'
tsconfig.json không chỉ là một tệp cấu hình mà còn là 'bộ quy tắc' áp dụng cho toàn bộ dự án. Với tsconfig.json, các nguyên tắc quan trọng như sau sẽ được xác định rõ ràng:.
- Mức độ an toàn kiểu dữ liệu.
- Quy ước lập trình cho nhóm của bạn.
- Ngăn ngừa lỗi trong tương lai.
Bằng cách hiểu tsconfig.json, bạn sẽ có thể không chỉ viết TypeScript mà còn thiết kế dự án một cách an toàn khi sử dụng TypeScript.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.