Công cụ chuyển đổi TypeScript sang JavaScript trực tuyến — TS/TSX sang JS/JSX
Loại bỏ kiểu dữ liệu TypeScript — chú thích kiểu, giao diện, bí danh kiểu và kiểu tổng quát — để nhận JavaScript thuần. Công cụ hỗ trợ .ts và .tsx: JSX được giữ nguyên, nên thành phần TSX sẽ trở thành JSX. Mã được chuyển đổi ngay trong trình duyệt; không có bước kiểm tra kiểu, đóng gói hay thực thi.
Xem một đoạn TypeScript sẽ trông như thế nào dưới dạng JavaScript thuần trước khi dùng trong dự án JS.
Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.
TypeScript
JavaScript
Khi nào nên sử dụng
- Xem một đoạn TypeScript sẽ trông như thế nào dưới dạng JavaScript thuần trước khi dùng trong dự án JS.
- Chuyển thành phần React .tsx sang .jsx bằng cách loại bỏ kiểu của thuộc tính và giữ nguyên JSX.
Cách sử dụng
- Dán TypeScript hoặc TSX, hoặc tải một ví dụ (giao diện và hàm, kiểu tổng quát, JSX). Khi tải ví dụ, nội dung đầu vào hiện tại sẽ được thay thế.
- Xem JavaScript ở bên phải. Chú thích kiểu và giao diện sẽ bị loại bỏ; mã tồn tại khi chạy, chẳng hạn enum, được chuyển thành JavaScript.
- Sao chép kết quả. Nếu cần đảm bảo an toàn kiểu, hãy kiểm tra riêng mã TypeScript gốc bằng tsc --noEmit.
TypeScript đầu vào
interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;JavaScript đầu ra
const greet = user => "Hello, " + user.name;
Chi tiết và giới hạn
Mã của bạn được chuyển đổi ngay trong trình duyệt và không được tải lên. Hãy xóa nội dung đầu vào sau khi dùng thiết bị chung.
Loại bỏ kiểu không phải là kiểm tra kiểu: const count: number = "text" vẫn được chuyển đổi mà không báo lỗi. Hãy kiểm tra kiểu bằng trình biên dịch TypeScript.
JSX vẫn là JSX. Để chạy thành phần React trong trình duyệt, bạn vẫn cần bước biên dịch JSX của dự án.
Các cấu trúc có giá trị khi chạy, chẳng hạn enum, sẽ tạo ra mã JavaScript thay vì bị loại bỏ.
Chỉ đoạn mã được dán vào mới được chuyển đổi: các lệnh nhập mô-đun không được phân giải, các tệp không được đóng gói và cú pháp hiện đại không được chuyển về cú pháp cũ cho trình duyệt đời trước.
FAQ
Tôi có thể chuyển TSX sang JSX không?
Có. Dán thành phần .tsx: kiểu của thuộc tính và giao diện sẽ bị loại bỏ, còn JSX được giữ nguyên, nên bạn có thể lưu kết quả thành .jsx. Công cụ này không biên dịch JSX thành các lời gọi React.createElement.
Công cụ này khác gì so với chạy tsc?
tsc kiểm tra kiểu cho toàn bộ dự án và có thể tạo JavaScript cho môi trường đích đã chọn. Trang này chỉ loại bỏ kiểu trong mã bạn dán bằng phép biến đổi TypeScript của Babel, giữ nguyên cú pháp hiện đại và không báo lỗi kiểu. Với toàn bộ dự án, hãy chạy tsc hoặc công cụ đóng gói như esbuild trên máy của bạn.
Tại sao mã có lỗi kiểu vẫn được chuyển đổi?
Việc chuyển đổi chỉ xử lý cú pháp. Công cụ không đối chiếu phép gán hay lời gọi hàm với kiểu dữ liệu tương ứng, nên hãy chạy trình biên dịch TypeScript trong dự án để tìm lỗi kiểu.
Tôi nên kiểm tra gì khi gặp lỗi cú pháp?
Hãy xem dòng và cột được báo lỗi, các dấu ngoặc xung quanh và chú thích kiểu tại đó. Rút gọn mã thành một đoạn nhỏ sẽ giúp xác định vấn đề; nếu gặp lỗi kết nối, hãy chọn Thử lại.