Nếu từng viết JavaScript một thời gian, bạn hẳn đã gặp cảnh một biến tưởng là số lại hoá ra chuỗi, hoặc gọi một hàm thiếu tham số mà mãi đến lúc người dùng bấm nút mới phát hiện. TypeScript ra đời chính để chặn loại lỗi đó ngay từ lúc gõ code, chứ không để nó trôi ra môi trường thật.
Kiểu tĩnh khác kiểu động ở chỗ nào
JavaScript là ngôn ngữ dynamically typed (kiểu động — kiểu dữ liệu chỉ được xác định lúc chạy). Một biến hôm nay là số, ngày mai gán chuỗi vào cũng không ai cản. Sự linh hoạt đó tiện khi viết nhanh, nhưng càng dự án lớn càng dễ sinh lỗi âm thầm.
TypeScript thêm static typing (kiểu tĩnh — kiểm tra kiểu lúc biên dịch). Bạn khai báo một biến là số thì gán chuỗi vào sẽ bị báo đỏ ngay trong trình soạn thảo, trước cả khi chạy. Hãy so sánh:
// JavaScript: không ai cản, lỗi chỉ lộ lúc chạy
function tinhTong(a, b) {
return a + b;
}
tinhTong(5, "10"); // ra "510" thay vì 15 — không báo gì
// TypeScript: khai báo kiểu, lỗi lộ ngay lúc gõ
function tinhTong(a: number, b: number): number {
return a + b;
}
tinhTong(5, "10"); // báo đỏ: "10" không phải numberPhần : number sau mỗi tham số gọi là type annotation (chú thích kiểu). Đoạn ): number ở cuối khai báo hàm này luôn trả về số. Trình biên dịch dựa vào đó để soi từng chỗ gọi hàm.
Lợi ích cốt lõi của TypeScript
Việc thêm kiểu không chỉ để “đẹp code”. Nó mang lại bốn lợi ích đo được trong công việc hằng ngày.
- Bắt lỗi sớm. Phần lớn lỗi kiểu được phát hiện lúc biên dịch thay vì lúc người dùng đang thao tác. Càng phát hiện sớm, càng rẻ để sửa.
- Tự gợi ý thông minh hơn. Khi trình soạn thảo biết kiểu của một đối tượng, nó gợi ý đúng thuộc tính, đúng tên hàm — gõ nhanh và ít sai chính tả tên biến.
- Code tự làm tài liệu. Đọc chữ ký hàm là biết nó nhận gì, trả gì, không phải dò ngược toàn bộ thân hàm.
- Refactor an toàn. Đổi tên một thuộc tính, đổi kiểu trả về — trình biên dịch chỉ ra mọi chỗ liên quan cần sửa, thay vì để bạn tự nhớ.
Một điểm dễ chịu là TypeScript tuỳ chọn. Bạn có thể thêm kiểu ở những chỗ quan trọng và để phần còn lại suy luận tự động, không bắt buộc chú thích mọi nơi. Nhờ vậy nó cân bằng giữa chặt chẽ và linh hoạt.
TypeScript chạy như thế nào
Trình duyệt không hiểu trực tiếp TypeScript. Bước compile (biên dịch) sẽ bóc hết phần chú thích kiểu và xuất ra JavaScript thuần để chạy ở trình duyệt hoặc Node. Nói cách khác, kiểu chỉ tồn tại lúc phát triển; bản chạy thật vẫn là JavaScript quen thuộc, không thêm gánh nặng runtime.
Cấu hình của một dự án nằm trong file tsconfig.json. Một vài tuỳ chọn đáng bật ngay từ đầu:
{
"compilerOptions": {
"strict": true, // bật toàn bộ kiểm tra nghiêm
"target": "ES2022", // phiên bản JavaScript đầu ra
"noImplicitAny": true // cấm kiểu "any" lén lút
}
}Bật strict ngay từ ngày đầu sẽ tiết kiệm rất nhiều công về sau, vì kéo cờ nghiêm vào một dự án cũ luôn khó hơn là chặt chẽ từ gốc.
TypeScript dùng ở đâu trong web hiện đại
Phần lớn hệ sinh thái front-end ngày nay mặc định dùng TypeScript: React, Next.js, Vue, Svelte đều có template TypeScript ngay khi tạo dự án. Phía máy chủ, Node viết bằng TypeScript cũng phổ biến cho API và service. Nếu bạn đang tìm hiểu nền tảng JavaScript hiện đại để chọn nghề, hiểu kiểu tĩnh gần như là điều kiện cần.
Liên hệ với phát triển block WordPress
Đây là chỗ nhiều người bất ngờ: WordPress hiện đại cũng dùng được TypeScript. Trình soạn thảo block (Gutenberg) viết bằng React, và khi tự code block tuỳ biến, bạn có thể bật TypeScript để gõ kiểu cho attributes (thuộc tính của block), cho dữ liệu REST API, hay cho store của Interactivity API.
Tài liệu chính thống của WordPress cho phép suy luận kiểu store khá gọn — ví dụ một store đếm số:
import { store } from '@wordpress/interactivity';
const myStore = store( 'myCounterPlugin', {
state: {
counter: 0,
},
actions: {
increment() {
myStore.state.counter += 1;
},
},
} );TypeScript tự suy ra counter là số, nên nếu bạn lỡ gán chuỗi vào nó sẽ báo lỗi ngay. Để bắt đầu, bộ công cụ @wordpress/scripts đã hỗ trợ TypeScript sẵn, còn @wordpress/create-block có thể tạo khung block dạng TypeScript. Web22 dựng theme và plugin web22-core bằng chính WordPress, nên kinh nghiệm thực tế là: với block phức tạp nhiều thuộc tính, kiểu tĩnh giúp đỡ rất nhiều khi sửa lại sau vài tháng quên hết logic.
Một lưu ý mới: WordPress đang phát triển gói build thế hệ sau (@wordpress/build, ra mắt cuối 2025) thay cho pipeline webpack/Babel cũ, dự kiến trở thành nền tảng cho @wordpress/scripts. Quy trình của bạn gần như không đổi, chỉ nhanh hơn — nên nếu mới bắt đầu, cứ học theo @wordpress/scripts là đủ.
Có nên dùng TypeScript cho dự án của bạn không
Không phải dự án nào cũng cần. Một trang tĩnh vài chục dòng script thì kiểu tĩnh có thể là thừa. Nhưng khi code lớn dần, nhiều người cùng sửa, hoặc bạn quay lại một dự án cũ sau thời gian dài, TypeScript trả lại công sức gấp bội ở khâu bảo trì. Quy tắc thực dụng: dự án càng sống lâu và càng nhiều người động vào, càng nên dùng kiểu tĩnh.
Nếu bạn đang cân nhắc nền tảng để xây website doanh nghiệp lâu dài và muốn hiểu rõ phần kỹ thuật phía sau, Web22 có chia sẻ thêm trong nhóm bài về dịch vụ thiết kế và phát triển WordPress, kể cả khâu code theme tuỳ biến nơi TypeScript bắt đầu phát huy tác dụng.
Câu hỏi thường gặp
TypeScript có thay thế JavaScript không?
Không. TypeScript là lớp phủ trên JavaScript và biên dịch ngược ra JavaScript thuần. Mọi JavaScript hợp lệ đều là TypeScript hợp lệ, nên bạn có thể chuyển dần từng phần.
Học TypeScript có khó hơn JavaScript nhiều không?
Nếu đã biết JavaScript, phần thêm chủ yếu là khái niệm về kiểu. Bạn có thể bắt đầu bằng vài chú thích đơn giản rồi nâng dần, không cần học hết một lúc.
WordPress có bắt buộc dùng TypeScript không?
Không bắt buộc. Bạn vẫn code block bằng JavaScript thuần được. TypeScript chỉ là lựa chọn giúp dự án lớn dễ bảo trì hơn.