Thử TypeScript trên trình duyệt: bóc chú thích kiểu, chạy thử và xem kết quả
Ô soạn thảo cho bạn gõ một đoạn TypeScript, bấm chạy để xem hai thứ cùng lúc: phần JavaScript còn lại sau khi các chú thích kiểu bị bóc đi, và kết quả in ra từ console.log. Đây là công cụ học và thử nhanh chạy hoàn toàn trong trình duyệt, không kiểm tra kiểu và không thay thế trình biên dịch chính thức.
Tính năng nổi bật
- Ô soạn thảo nạp sẵn một đoạn mẫu có interface, hàm nhận tham số có kiểu và mẫu chuỗi
- Ba nút nạp nhanh ví dụ về interface, generic và enum để xem cách từng cú pháp biến đổi
- Bấm Run để bóc chú thích kiểu rồi thực thi phần mã còn lại ngay trong trình duyệt
- Khung JavaScript hiển thị đúng đoạn mã sau khi bóc kiểu, giúp thấy phần nào bị xóa
- Khung Console hiển thị nội dung các lời gọi console.log, đối tượng được in ra dạng JSON thụt lề
- Thông báo lỗi khi mã ném ngoại lệ hoặc sai cú pháp, kèm nội dung lỗi của trình duyệt
- Nút sao chép phần JavaScript và nút xóa trắng ô soạn thảo
- Không gửi mã đi đâu, toàn bộ việc biến đổi và thực thi diễn ra trên máy bạn
Công cụ này giải quyết đúng một việc: cho thấy kiểu biến mất như thế nào
Người mới học TypeScript hay vướng ở một câu hỏi: những chú thích kiểu mình viết ra rồi chạy ở đâu. Câu trả lời là chúng không chạy ở đâu cả, chúng bị bóc sạch trước khi mã tới trình duyệt hay tới Node.js. Nhìn thấy điều đó bằng mắt hiệu quả hơn nhiều so với đọc mô tả: bạn gõ một hàm có kiểu tham số và kiểu trả về, bấm chạy, và thấy ở khung bên phải chỉ còn lại một hàm JavaScript trơ trọi không còn dấu vết của kiểu nào. Từ đó bạn hiểu ngay vì sao không thể kiểm tra kiểu lúc chương trình đang chạy, vì sao phải tự viết hàm kiểm tra khi nhận dữ liệu từ một dịch vụ bên ngoài, và vì sao thư viện xác thực dữ liệu lúc chạy vẫn cần thiết dù dự án đã dùng TypeScript. Đó là giá trị của trang này, và cũng là ranh giới của nó.
Lợi ích khi sử dụng
- Thấy tận mắt việc chú thích kiểu bị xóa khi biên dịch thay vì chỉ đọc lý thuyết
- Thử nhanh một đoạn logic ngắn mà không phải mở dự án hay cài đặt gì
- Có ba ví dụ bấm là chạy, tiện khi giải thích cú pháp cho người mới trong nhóm
- Xem được kết quả in ra ngay cạnh mã nguồn, không phải mở bảng điều khiển của trình duyệt
- Không gửi mã lên máy chủ nên dùng được cả với đoạn mã nội bộ chưa công bố
Cách dùng ô thử TypeScript
- 1Gõ hoặc dán đoạn TypeScript vào ô bên trái, hoặc bấm một trong ba nút ví dụ để nạp mã mẫu.
- 2Bấm nút Run để công cụ bóc phần chú thích kiểu rồi thực thi đoạn mã còn lại.
- 3Đọc khung JavaScript để đối chiếu xem những phần nào của mã gốc đã bị xóa đi.
- 4Đọc khung Console để xem kết quả các lời gọi console.log, hoặc nội dung lỗi nếu mã chạy hỏng.
- 5Bấm biểu tượng sao chép nếu muốn lấy phần JavaScript, hoặc bấm biểu tượng thùng rác để xóa trắng và viết lại.
Công cụ này bóc kiểu bằng biểu thức chính quy, không phải bằng trình biên dịch
Điều quan trọng nhất cần biết: phần chuyển đổi ở đây dùng một chuỗi phép thay thế bằng biểu thức chính quy chứ không chạy trình biên dịch TypeScript thật. Nó xóa phần chú thích kiểu đứng sau dấu hai chấm, xóa khối interface, xóa khai báo type kết thúc bằng dấu chấm phẩy, xóa cặp ngoặc nhọn chứa một tham số kiểu và xóa mệnh đề as. Kéo theo hai hệ quả bạn phải nhớ. Thứ nhất, không có bước kiểm tra kiểu nào: bạn gán một chuỗi vào biến khai báo kiểu số thì mã vẫn chạy bình thường và không có lời cảnh báo nào, trong khi trình biên dịch thật sẽ báo lỗi ngay. Thứ hai, phần mã sau khi bóc được thực thi bằng eval, tức là nó chạy đúng như JavaScript thường trong trang này. Nếu bạn cần kiểm tra kiểu thật, xem thông báo lỗi chính xác hay thử các tùy chọn biên dịch, hãy dùng trang thử nghiệm chính thức tại typescriptlang.org kèm phần chọn phiên bản và cấu hình.
Những cú pháp bộ bóc kiểu ở đây xử lý được và những cú pháp làm nó hỏng
Chạy đúng: chú thích kiểu đơn giản dạng một từ như chuỗi, số, đúng sai và tên interface; khai báo interface phẳng không lồng ngoặc nhọn bên trong; khai báo type một dòng kết thúc bằng dấu chấm phẩy; hàm có một tham số kiểu và lời gọi có chỉ định tham số kiểu; mệnh đề as với một tên kiểu. Không chạy đúng: kiểu hợp dạng chuỗi hoặc số vì phần sau dấu gạch đứng không bị xóa; kiểu có tham số như mảng của chuỗi hay hứa hẹn trả về rỗng vì cặp ngoặc nhọn chứa nhiều hơn một từ không khớp mẫu; kiểu đối tượng viết trực tiếp trong chú thích; interface có thuộc tính là đối tượng lồng nhau vì mẫu dừng ở dấu ngoặc nhọn đóng đầu tiên. Đặc biệt lưu ý ví dụ enum có sẵn trong ba nút mẫu: từ khóa enum không phải cú pháp JavaScript hợp lệ và bộ chuyển đổi không sinh mã tương đương cho nó, nên bấm chạy sẽ ra thông báo lỗi cú pháp chứ không ra kết quả.
Xóa kiểu là gì và vì sao TypeScript chọn cách này
TypeScript được thiết kế theo nguyên tắc không thêm gánh nặng lúc chạy: mọi thứ thuộc về hệ thống kiểu đều bị xóa khi biên dịch, phần còn lại là JavaScript thuần. Nhờ vậy mã biên dịch ra không chậm hơn mã viết tay và không cần thư viện đi kèm. Có vài ngoại lệ vẫn sinh ra mã thật: enum tạo ra một đối tượng tra cứu hai chiều, namespace tạo ra một hàm bao, thuộc tính khai báo ngay trên tham số hàm khởi tạo sinh ra lệnh gán, và trang trí theo cách cũ cũng sinh mã. Vì các ngoại lệ đó mà những công cụ chỉ biết bóc kiểu sẽ vấp phải chúng, và TypeScript đã bổ sung một tùy chọn cho phép chỉ dùng cú pháp có thể xóa được để tránh chuyện này. Đây cũng là lý do các bộ chuyển mã tốc độ cao như esbuild hay swc đều nêu rõ chúng chỉ bóc kiểu chứ không kiểm tra kiểu, nên trong quy trình thật bạn vẫn phải chạy riêng lệnh kiểm tra kiểu trước khi phát hành.
Kết quả in ra được bắt như thế nào và những gì không bắt được
Trước khi thực thi, công cụ thay tạm hàm console.log bằng một hàm thu thập, chạy mã, rồi trả console.log về như cũ. Đối số là đối tượng được chuyển thành chuỗi JSON thụt lề hai khoảng trắng, còn lại chuyển thành chuỗi thường, các đối số trên cùng một lời gọi nối bằng khoảng trắng. Ba điều không bắt được từ cơ chế này. Một, chỉ console.log bị thay, nên console.error, console.warn, console.table hay console.dir vẫn in thẳng vào bảng điều khiển của trình duyệt chứ không hiện trong khung kết quả. Hai, mọi thứ chạy bất đồng bộ sẽ in sau khi hàm thu thập đã bị gỡ bỏ, nên đoạn mã dùng hẹn giờ hay lời hứa sẽ cho khung kết quả trống. Ba, nếu mã ném lỗi ở giữa chừng thì những dòng đã thu được trước đó bị thay bằng nội dung lỗi, bạn sẽ không thấy phần đã in ra trước lúc lỗi.
Những khái niệm TypeScript hay phải tra khi mới học
Interface và type gần như thay thế được cho nhau khi mô tả hình dạng đối tượng, khác nhau ở chỗ interface gộp được nhiều khai báo cùng tên còn type thì không, đổi lại type biểu diễn được kiểu hợp và kiểu giao. Generic là tham số kiểu, cho phép một hàm giữ được mối liên hệ giữa kiểu đầu vào và kiểu đầu ra thay vì phải trả về kiểu bất kỳ. Nhóm kiểu tiện ích dựng sẵn tiết kiệm rất nhiều công: Partial biến mọi thuộc tính thành tùy chọn, Required làm điều ngược lại, Pick và Omit chọn hoặc loại bớt thuộc tính, Record dựng một bản đồ khóa giá trị, ReturnType lấy kiểu trả về của một hàm. Về cấu hình, hai lựa chọn ảnh hưởng lớn nhất tới trải nghiệm là chế độ kiểm tra giá trị rỗng và chế độ cấm kiểu ngầm định bất kỳ; bật cả hai ngay từ đầu dự án dễ hơn nhiều so với bật giữa chừng. Toán tử satisfies bổ sung ở bản 4.9 cho phép kiểm tra một giá trị có khớp kiểu hay không mà vẫn giữ nguyên kiểu suy ra hẹp của nó.
Câu hỏi thường gặp (FAQ)
Công cụ này có kiểm tra kiểu như trình biên dịch thật không?
Không. Nó chỉ bóc phần chú thích kiểu bằng phép thay thế văn bản rồi chạy mã còn lại, hoàn toàn không có bước kiểm tra kiểu. Gán một chuỗi vào biến khai báo kiểu số ở đây vẫn chạy trơn tru. Muốn thấy lỗi kiểu thật cùng thông báo chi tiết, hãy dùng trang thử nghiệm chính thức tại typescriptlang.org hoặc chạy lệnh kiểm tra kiểu trong dự án.
Vì sao ví dụ enum bấm chạy lại báo lỗi?
Vì từ khóa enum không tồn tại trong JavaScript, nó là cú pháp riêng của TypeScript và cần trình biên dịch sinh ra một đối tượng tra cứu tương ứng. Bộ chuyển đổi ở đây không làm việc đó, nên khối enum được giữ nguyên và trình duyệt báo lỗi cú pháp khi thực thi. Bạn có thể thay bằng một đối tượng thường kèm khóa và giá trị để chạy được.
Vì sao kiểu hợp như chuỗi hoặc số làm mã chạy sai?
Vì mẫu tìm kiếm chỉ xóa được phần chú thích gồm một từ đứng sau dấu hai chấm, nên với kiểu hợp thì phần đầu bị xóa còn dấu gạch đứng và phần sau vẫn nằm lại trong mã, tạo ra cú pháp không hợp lệ. Tình huống tương tự xảy ra với kiểu có tham số và kiểu đối tượng viết trực tiếp trong chú thích.
Có nhập thư viện từ npm vào chạy thử được không?
Không. Mã được thực thi bằng eval trong ngữ cảnh trang này, không có bộ nạp mô đun, nên câu lệnh import sẽ gây lỗi. Nếu bạn cần thử mã có phụ thuộc thư viện bên ngoài, hãy dùng một môi trường phát triển trên trình duyệt có hỗ trợ cài gói, hoặc dựng một dự án nhỏ trên máy.
Vì sao khung kết quả trống khi mã có hẹn giờ hoặc lời hứa?
Vì hàm thu thập thay cho console.log chỉ tồn tại trong lúc đoạn mã chạy đồng bộ, ngay sau đó nó được gỡ bỏ và console.log trở lại như cũ. Mọi dòng in ra sau thời điểm đó đi thẳng vào bảng điều khiển của trình duyệt. Bạn vẫn xem được chúng bằng cách mở công cụ dành cho nhà phát triển và nhìn tab Console.
console.error và console.warn có hiện trong khung kết quả không?
Không, chỉ console.log được chuyển hướng vào khung kết quả. Các hàm còn lại của đối tượng console vẫn in ra bảng điều khiển của trình duyệt. Khi thử mã ở đây, cách gọn nhất là dùng console.log cho mọi thứ bạn muốn nhìn thấy trên trang.
Chạy mã lạ dán từ trên mạng ở đây có an toàn không?
Không nên. Mã được thực thi bằng eval nên nó chạy với đúng quyền của trang này trong trình duyệt bạn: đọc ghi được bộ nhớ cục bộ của trang, gửi được yêu cầu mạng, mở được cửa sổ mới. Chỉ chạy mã bạn hiểu rõ. Đây là rủi ro chung của mọi ô thử mã chạy phía trình duyệt, không riêng trang này.
Kiểu trong TypeScript có tồn tại lúc chương trình đang chạy không?
Không, toàn bộ hệ thống kiểu bị xóa khi biên dịch, đúng như bạn thấy ở khung JavaScript. Vì vậy bạn không thể kiểm tra một giá trị có khớp interface hay không bằng chính interface đó. Khi nhận dữ liệu từ dịch vụ bên ngoài, hãy tự viết hàm kiểm tra hoặc dùng thư viện xác thực dữ liệu lúc chạy rồi mới ép kiểu.
Interface và type nên chọn cái nào?
Với việc mô tả hình dạng một đối tượng thì hai cái gần tương đương, chọn theo quy ước của nhóm. Interface có ưu thế khi cần mở rộng và khi nhiều khai báo cùng tên cần gộp lại, hữu ích lúc bổ sung kiểu cho thư viện bên ngoài. Type cần thiết khi bạn phải biểu diễn kiểu hợp, kiểu giao, kiểu bộ giá trị hay các kiểu tính toán từ kiểu khác.
Vì sao phần JavaScript hiện ra ít dòng trống hơn mã gốc?
Vì bước cuối của phép chuyển đổi gộp các dòng trống liên tiếp lại, chủ yếu để phần mã sau khi xóa interface không còn khoảng trống lớn. Đây thuần túy là chuyện hiển thị và không ảnh hưởng tới cách mã chạy. Nếu bạn định dùng lại phần JavaScript đó, hãy chạy qua công cụ định dạng mã trước.
Có lưu hoặc chia sẻ đoạn mã bằng đường dẫn được không?
Chưa có. Nội dung ô soạn thảo nằm trong trạng thái của trang và sẽ mất khi bạn tải lại. Hãy sao chép mã ra file hoặc dán vào ghi chú nếu cần giữ. Với nhu cầu chia sẻ ví dụ kèm đường dẫn riêng, trang thử nghiệm chính thức của TypeScript có sẵn tính năng nén mã vào phần địa chỉ.
Học TypeScript nên bắt đầu từ đâu sau khi thử ở đây?
Bước tiếp theo hợp lý là dựng một dự án nhỏ trên máy với tệp cấu hình biên dịch, bật chế độ kiểm tra giá trị rỗng và chế độ cấm kiểu ngầm định bất kỳ ngay từ đầu, rồi tập chuyển vài tệp JavaScript sẵn có sang. Chính lúc trình biên dịch báo lỗi bạn mới học được nhiều nhất, và đó là phần mà công cụ trên trang này không cung cấp được.
Từ khóa liên quan
- typescript playground online
- chạy typescript online
- thử typescript trên trình duyệt
- typescript sang javascript
- type erasure typescript
- xóa kiểu khi biên dịch typescript
- interface và type khác nhau
- generic trong typescript
- enum typescript là gì
- utility types partial pick omit
- strictnullchecks là gì
- noimplicitany typescript
- satisfies typescript
- esbuild bóc kiểu typescript
- swc transpile typescript
- học typescript cơ bản
- tsconfig json cấu hình
- kiểm tra kiểu lúc chạy zod
- typescript cho người mới
- công cụ thử code typescript miễn phí
