JavaScript to TypeScript Converter: từ PropTypes sang interface
Công cụ JavaScript to TypeScript converter này giúp bạn bỏ qua lượt đầu tiên, nhàm chán nhất của một cuộc di chuyển mã. Nó đọc mã của bạn bằng trình phân tích cú pháp, biến PropTypes của React thành interface, lấy kiểu từ giá trị mặc định và thêm những kiểu có thể suy ra, rồi trả về TypeScript đã được định dạng. Mỗi lần nó xử lý một tệp hoặc một đoạn mã, không bao giờ chạy mã của bạn và không tải gì lên.Những gì nó không thể biết, nó để lại cho bạn. Các phần bên dưới nói rõ đó là gì.
Cách dùng công cụ convert JavaScript to TypeScript online
- Dán mã của bạn vào ô JavaScript hoặc JSX. Trước khi dán, ô hiển thị "Dán JavaScript hoặc JSX vào đây…". Giới hạn là 5.000.000 ký tự.
- Chờ một chút. Công cụ chuyển đổi khi bạn gõ hoặc dán, khoảng 0,35 giây sau thay đổi cuối cùng, nên không có nút nào để bấm.
- Đọc kết quả bên dưới tiêu đề "TypeScript", hoặc "TypeScript (TSX)" khi mã có JSX. Kết quả hiện dưới dạng mã được tô màu, chỉ để đọc.
- Xem các dòng thông báo phía trên mã. Chúng cho biết đã làm gì, ví dụ "Đã viết 2 interface" hoặc "Đã thêm 11 chú thích kiểu". Nếu không có chỗ nào cần kiểu, dòng đó ghi "Không có chỗ nào cần kiểu, nên mã chỉ được định dạng lại."
- Chọn Sao chép vào khay nhớ tạm. Nút sẽ đổi thành "Đã sao chép".
- Bên dưới mã, Tùy chọn chuyển đổi có hai hộp kiểm là Chế độ React và Chế độ Strict. Nếu bạn đổi một trong hai, mã sẽ được chuyển đổi lại.
Nếu văn bản không phải JavaScript hợp lệ, bạn sẽ thấy "Đây không phải JavaScript hợp lệ: lỗi cú pháp ở dòng N, cột M." cùng dòng bị lỗi và một dấu chỉ bên dưới. Mã đã chứa cú pháp TypeScript được tính là không hợp lệ. Công cụ làm việc với mã bạn dán, nên phù hợp với một component, một module hay một đoạn mã, không phù hợp với cả kho mã.
Ví dụ: một component React có PropTypes
Đầu vào là một bộ đếm nhỏ có PropTypes và một trình xử lý sự kiện chưa có kiểu. Công cụ viết ra interface CounterProps: label là bắt buộc nhờ isRequired, còn start và onChange là tùy chọn. Giá trị mặc định n = 1 thành n: number = 1, và trình xử lý onClick trên một button cho e kiểu React.MouseEvent dành cho phần tử nút. Lệnh import prop-types không dùng đến bị bỏ, và Prettier chia JSX ra nhiều dòng. Tổng cộng, công cụ báo đã viết 1 interface và thêm 3 chú thích kiểu.
Điều không đổi: useState(start) vẫn như cũ, vì công cụ không đoán kiểu từ cách một giá trị được dùng.
PropTypes React thành interface TypeScript như thế nào
Khi Chế độ React bật, công cụ viết một interface tên TênProps từ PropTypes của component, đặt nó phía trên component và dùng nó để gán kiểu cho props. Cách này áp dụng cho component hàm (khai báo, hàm mũi tên và loại bọc trong memo) và cho class có propTypes tĩnh hoặc phép gán Foo.propTypes = {...}. Prop có .isRequired là bắt buộc, các prop khác được thêm ?. Chú thích phía trên một prop được chuyển vào interface.
stringvànumbergiữ nguyên làstringvànumberboolthànhbooleanfuncthành kiểu hàm với đối số bất kỳarrayvàobjectthànhany[]và một Record có khóastringnodevàelementthànhReactNodevàReactElementarrayOf(T)vàobjectOf(T)thànhT[]và một Record có giá trịToneOf([...])thành một union các literal, như'sm' | 'lg'oneOfType([...])thành một union các kiểu được liệt kêshape({...})vàexact({...})thành một kiểu đối tượnginstanceOf(Foo)thànhFoo
Câu lệnh propTypes bị xóa, cùng với import prop-types nếu không còn gì dùng đến. Component class còn nhận thêm interface state từ this.state = {...}. Class không có PropTypes nhận interface props được dựng từ các this.props.x mà nó đọc. Component hàm không có PropTypes chỉ nhận interface props ở Chế độ Strict.
Những kiểu được thêm khi không có PropTypes, và Chế độ Strict
- Giá trị mặc định: tham số có giá trị mặc định được gán kiểu từ giá trị đó, nên
n = 5thànhn: number = 5vàlet x = 0thànhlet x: number = 0. - Kiểu trả về: được thêm khi mọi
returncho cùng một kiểu nguyên thủy (string,numberhoặcboolean) hoặc khi không córeturnnào:void, hoặc Promise củavoidvới hàmasync. - Trường của class: mỗi
this.x = ...trong một class (không kế thừa gì, hoặc là component React) nhận một khai báo thuộc tính. - Sự kiện React: tham số của trình xử lý trên phần tử DOM nhận kiểu sự kiện tương ứng, như
React.ChangeEvent, vớionChange,onClickhoặconSubmit. - Ref:
useRef(null)lấy kiểu phần tử từref={...}mà nó gắn vào.
Để biến JSX thành TSX, bạn chỉ cần dán component: khi mã có JSX, kết quả có tiêu đề "TypeScript (TSX)". Chế độ Strict mặc định tắt. Hãy bật nó để thấy mọi chỗ còn thiếu. Nó ghi any tường minh ở nơi không suy ra được kiểu: let x; thành let x: any;, const list = [] thành any[], và tham số chưa có kiểu nhận : any. Khi tắt, những chỗ đó được để không có kiểu. Khi bật, danh sách những gì còn phải sửa rất dễ tìm.
Những gì công cụ để nguyên, chú thích và quyền riêng tư
Công cụ đọc một đoạn mã và không đoán bất cứ điều gì. Những trường hợp này được để nguyên hoặc thành any:
- Tham số callback truyền thẳng vào một lời gọi, như trong
items.map((x) => ...): được để nguyên để TypeScript gán kiểu từ hàm nhận chúng. - Kiểu lấy từ tệp khác hoặc trình kiểm tra PropTypes tự viết: thành
any, và bản thân trình kiểm tra không được giữ lại. - Component dùng
forwardRef: PropTypes của nó không bị đụng đến. - Chú thích kiểu JSDoc không được đọc.
- Kiểu đoán từ tên tham số hay cách dùng thì không bao giờ được tạo ra.
- Không suy luận giữa các tệp: hãy chuyển đổi và kiểm tra từng tệp một.
- Khi Chế độ React tắt, PropTypes được để nguyên.
Kết quả là lượt đầu tiên, không phải một cuộc di chuyển đã hoàn tất. Hãy dán nó vào dự án của bạn, chạy tsc và tự siết chặt từng any. Công cụ không đổi tên tệp, nên hãy tự lưu component với đuôi .tsx.
Chú thích và bố cục được giữ lại: mã được đọc bằng @babel/parser, mỗi chú thích kiểu được chèn vào văn bản gốc của bạn như một chỉnh sửa, rồi Prettier định dạng lại kết quả và giữ kiểu dấu nháy, dấu chấm phẩy và độ rộng thụt lề của bạn. Mọi việc diễn ra trong một Web Worker ngay trong trình duyệt, và mã của bạn không bao giờ được tải lên hay chạy. Để dọn mã trước khi chuyển đổi, hãy dùng Định dạng mã nguồn. Để đọc hiểu trước một đoạn script đã nén hoặc bị làm rối, hãy dùng Gỡ làm rối mã JS.
Câu hỏi thường gặp
Có công cụ convert JavaScript to TypeScript online nào không cần tải mã lên không?
Có. Dán JavaScript hoặc JSX vào ô "JavaScript hoặc JSX". Khoảng một phần ba giây sau, TypeScript hiện bên dưới tiêu đề "TypeScript", hoặc "TypeScript (TSX)" nếu mã có JSX. Không có nút chuyển đổi, và mã không rời khỏi trình duyệt của bạn. Chọn "Sao chép vào khay nhớ tạm" để lấy kết quả.
Công cụ này có biến PropTypes React thành interface TypeScript được không?
Được. Khi Chế độ React bật, mỗi đối tượng propTypes trở thành một interface đặt theo tên component, ví dụ CounterProps. Prop có isRequired là bắt buộc và các prop khác có dấu hỏi. Câu lệnh propTypes bị xóa, cùng với import prop-types nếu không còn gì trong tệp dùng đến. Nó hoạt động với component hàm và với class có propTypes tĩnh.
Làm sao để biến JSX thành TSX?
Dán component JSX. Khi mã có JSX, kết quả có tiêu đề "TypeScript (TSX)" và Chế độ React tự bật, nên props nhận interface và trình xử lý nhận kiểu sự kiện. Công cụ không đổi tên tệp. Hãy lưu kết quả trong dự án của bạn với đuôi .tsx.
Chế độ React và Chế độ Strict làm gì?
Chế độ React, trong "Tùy chọn chuyển đổi", biến PropTypes thành interface và gán kiểu cho trình xử lý sự kiện, props và hook. Chế độ này mặc định bật khi mã có JSX, react hoặc prop-types, và khi tắt thì PropTypes được để nguyên. Chế độ Strict mặc định tắt và ghi any tường minh ở nơi không suy ra được kiểu, thay vì bỏ trống.
Vì sao kết quả vẫn còn any?
Một kiểu chỉ được viết khi đọc được từ chính mã. Trình kiểm tra PropTypes tự viết hoặc kiểu nhập từ tệp khác thành any, và Chế độ Strict thêm any tường minh cho biến và tham số chưa có kiểu. Kết quả là lượt đầu tiên. Hãy chạy nó qua tsc và thay các any bằng kiểu thật.
Vì sao tham số của callback không được gán kiểu?
Một tham số truyền thẳng vào lời gọi, như x trong items.map((x) => x.id), được cố ý để nguyên, để TypeScript vẫn có thể gán kiểu từ hàm nhận callback.
Chú thích và định dạng của tôi có được giữ không?
Chú thích được giữ, vì các chú thích kiểu được chèn vào mã gốc của bạn như chỉnh sửa văn bản thay vì dựng lại mã. Sau đó Prettier chạy qua, giữ kiểu dấu nháy, dấu chấm phẩy và độ rộng thụt lề của bạn, nhưng có thể ngắt lại các dòng dài. Chú thích phía trên một mục PropTypes được chuyển vào thuộc tính tương ứng của interface.
Mã của tôi có bị tải lên hoặc chạy không?
Không. Mã được phân tích và viết lại trong trình duyệt của bạn, trong một Web Worker, và không bao giờ được gửi đến máy chủ. Nó cũng không bao giờ được chạy. Nếu có lỗi cú pháp, bạn sẽ thấy thông báo kèm số dòng và số cột. Giới hạn là 5.000.000 ký tự.
