JSON sang TypeScript

Đề xuất Liên quan

Về JSON sang TypeScript: tự động biến dữ liệu JSON thành kiểu TS

Trường hợp sử dụng

• Khi phát triển frontend, chuyển đổi nhanh phản hồi JSON từ REST API hoặc GraphQL sang interface TS, tránh phải viết định nghĩa kiểu thủ công.
• Khi các dự án React/Vue/Angular cần khai báo kiểu cho Props, State, tham số thành phần, tạo trong vài giây từ JSON mẫu.
• Trong các dự án TypeScript full-stack, khi frontend và backend chia sẻ định nghĩa kiểu, mock JSON của backend có thể đóng vai trò là nguồn kiểu cho frontend.
• Khi tích hợp với API bên thứ ba (vận chuyển, thời tiết, thanh toán, v.v.), nhanh chóng tạo các interface TypeScript tương ứng, tránh phải xem qua tài liệu.
• Suy luận ngược định nghĩa kiểu từ mock data, test fixture, tệp cấu hình JSON để tăng cường an toàn kiểu và gợi ý IDE.
• Chuyển đổi JSON Schema được xuất từ ORM cơ sở dữ liệu sang interface TypeScript để tích hợp vào định nghĩa DTO backend Node.js.
• Khi học TypeScript, chuyển đổi JSON hiện có thành ví dụ interface để hiểu cú pháp của kiểu lồng nhau, kiểu hợp nhất, trường tùy chọn.
• Khi tái cấu trúc mã, chuyển đổi các object literal JS rải rác thành interface chính thức, cải thiện khả năng đọc mã và an toàn kiểu.

Cách Sử dụng

1. Dán nội dung JSON vào ô nhập bên trái, hoặc nhấp nút "Tải lên" để chọn tệp .json/.txt, hoặc nhấp "Mẫu" để tải mẫu tích hợp.
2. Nhấp nút tên interface ở bên phải thanh công cụ (hoặc biểu tượng bánh răng), tùy chỉnh tên interface gốc (mặc định Root), bật trường tùy chọn/readonly.
3. Công cụ sẽ tự động chuyển đổi (debounce 400ms sau khi nhập); xem mã interface TypeScript được tạo ở bên phải, tô sáng CodeMirror giúp dễ đọc.
4. Chọn kiểu thụt lề (2 hoặc 4 dấu cách), điều chỉnh độ rộng bảng bên trái/phải của thanh công cụ để có trải nghiệm xem tối ưu.
5. Nhấp "Sao chép" để sao chép mã TS vào bộ nhớ tạm, hoặc "Tải xuống" để lưu dưới dạng tệp `${interfaceName}.ts` (ví dụ: User.ts).
6. Dán mã vào thư mục `types/` hoặc `src/types/` của dự án, sử dụng thông qua import khi cần.

Tính năng

• Suy luận kiểu thông minh: tự động nhận dạng các kiểu null, boolean, number, string, array, object, v.v. và ánh xạ sang cú pháp TS gốc.
• Tự động mở rộng đối tượng lồng nhau: tự động tạo các interface con độc lập cho các đối tượng lồng nhau (ví dụ: RootAddress), giữ cho hệ thống phân cấp kiểu rõ ràng và tránh dư thừa.
• Xử lý thông minh kiểu mảng: tạo `T[]` cho các phần tử cùng kiểu, mảng hợp nhất `(A | B)[]` cho kiểu hỗn hợp, `any[]` dự phòng cho mảng trống.
• Đánh dấu trường tùy chọn: khi bật, tự động phát hiện các trường null/undefined, thêm công cụ sửa đổi `?`, tạo mã tuân thủ chế độ TypeScript strict.
• Hỗ trợ trường readonly: khi bật, thêm công cụ sửa đổi `readonly` cho tất cả các trường, phù hợp cho trạng thái bất biến, cấu hình, DTO, v.v.
• Tùy chỉnh tên interface: tên interface gốc có thể cấu hình (mặc định Root), tên tệp tải xuống cũng sử dụng tên này (ví dụ: User.ts).
• Thụt lề 2/4 dấu cách có thể chọn: chuyển đổi một cú nhấp trên thanh công cụ giữa kiểu 2 dấu cách (mặc định ESLint) và 4 dấu cách.
• Chuyển đổi tự động thời gian thực: sau 400ms kể từ khi nhập JSON, debounde và chuyển đổi tự động, không cần nhấp nút; hỗ trợ dán, tải tệp lên, mẫu - ba cách nhập.
• Tự sửa lỗi JSON: hàm sửa lỗi tryFixJSON tích hợp, tự động xử lý dấu phẩy ở cuối, dấu nháy đơn, thiếu dấu ngoặc kép và các lỗi cú pháp phổ biến khác.
• Tô sáng mã TypeScript: đầu ra bên phải sử dụng tô sáng CodeMirror + JavaScript (TypeScript), dễ đọc.
• Sao chép và tải xuống: một cú nhấp để sao chép vào bộ nhớ tạm hoặc tải xuống tệp .ts chuẩn để sử dụng trực tiếp trong các dự án frontend.
• Xử lý hoàn toàn cục bộ trong trình duyệt: tất cả phân tích cú pháp JSON, suy luận kiểu, tạo interface đều được thực hiện trong JavaScript trình duyệt, dữ liệu gốc không được tải lên.

Câu hỏi Thường gặp

Xử lý sự cố

Thuật ngữ

JSON (JavaScript Object Notation)

Định dạng trao đổi dữ liệu nhẹ, dựa trên cú pháp đối tượng JavaScript nhưng độc lập với ngôn ngữ lập trình. Hỗ trợ 6 kiểu cơ bản: đối tượng ({}), mảng ([]), chuỗi, số, boolean, null. Được sử dụng rộng rãi trong REST API, truyền dữ liệu frontend-backend, tệp cấu hình, nhật ký, v.v.

TypeScript

Tập cha của JavaScript được Microsoft phát triển, bổ sung cho JavaScript các tính năng như định nghĩa kiểu tĩnh, interface, generic. Mã TypeScript được biên dịch thành JavaScript thuần để chạy trong trình duyệt hoặc Node.js. Là ngôn ngữ được ưa chuộng cho các dự án frontend hiện đại React, Vue, Angular.

interface (giao diện)

Từ khóa TypeScript để mô tả kiểu đối tượng, cú pháp: `interface Name { prop: type; }`. Hỗ trợ hợp nhất khai báo (các interface cùng tên tự động hợp nhất), implements (lớp triển khai interface), extends (kế thừa interface). Là cách chính để mô tả hình dạng đối tượng trong TypeScript.

type alias

Từ khóa TypeScript để đặt bí danh cho kiểu, cú pháp: `type Name = ...`. Có thể được sử dụng để định nghĩa kiểu hợp nhất (`A | B`), kiểu giao (`A & B`), kiểu hàm, v.v. Linh hoạt hơn interface nhưng không hỗ trợ hợp nhất khai báo. Công cụ này sử dụng interface chứ không phải type.

Suy luận kiểu (Type Inference)

Quá trình công cụ này tự động xác định kiểu TS tương ứng dựa trên typeof và hình thức cụ thể của value JSON. Ví dụ: typeof string ánh xạ thành string, khi Array.isArray() trúng, xử lý như mảng, khi typeof object trúng, tạo interface con độc lập.

Trường tùy chọn (?)

Công cụ sửa đổi TypeScript chỉ ra rằng trường có thể bị bỏ qua. `name?: string` có nghĩa là trường name có thể không tồn tại (giá trị undefined). Khi bật tùy chọn "Trường tùy chọn" của công cụ, các trường có giá trị null hoặc undefined sẽ tự động nhận `?`.

Trường readonly (readonly)

Công cụ sửa đổi TypeScript chỉ ra rằng trường là bất biến. `readonly id: number` có nghĩa là trường id không thể được gán lại sau khi đối tượng được tạo. Khi bật tùy chọn "Trường readonly" của công cụ, tất cả các trường sẽ tự động nhận `readonly`.

Kiểu hợp nhất (Union Type)

Cú pháp TypeScript chỉ ra rằng giá trị có thể là một trong nhiều kiểu, được viết là `A | B`. Công cụ sử dụng nó khi kiểu phần tử mảng không nhất quán, ví dụ `(string | number)[]` có nghĩa là phần tử mảng có thể là string hoặc number.

Kiểu mảng (Array Type)

Cú pháp TypeScript cho mảng, có hai dạng: dạng generic `Array<T>` và dạng viết tắt `T[]`. Công cụ sử dụng nhất quán dạng viết tắt. Công cụ có ba chế độ tạo kiểu mảng: kiểu đồng nhất `T[]`, kiểu hỗn hợp `(A | B)[]`, mảng trống `any[]`.

Interface lồng nhau (Nested Interface)

Tham chiếu các interface khác trong một interface để tạo thành hệ thống phân cấp kiểu. Công cụ tạo interface con độc lập cho mỗi đối tượng lồng nhau, interface chính tham chiếu thông qua tên thuộc tính. Ví dụ: Root tham chiếu RootAddress, RootAddress có thể được tham chiếu độc lập bởi các kiểu khác.

Chế độ TypeScript strict

Chế độ nghiêm ngặt của trình biên dịch TypeScript, bao gồm một số tùy chọn phụ: noImplicitAny, strictNullChecks, strictFunctionTypes, v.v. Khi bật strictNullChecks, null và undefined là các kiểu độc lập và không thể gán cho biến kiểu khác. Các trường tùy chọn được tạo bởi công cụ này hoàn toàn tương thích với chế độ strict.

DTO (Data Transfer Object)

Đối tượng truyền dữ liệu, được sử dụng để truyền dữ liệu giữa các lớp khác nhau (ví dụ: lớp API và Service). Trong các dự án TypeScript thường được mô tả bằng interface, kết hợp với readonly để nhấn mạnh tính bất biến. Công cụ này là công cụ phổ biến để tạo định nghĩa kiểu DTO.

Hợp nhất khai báo (Declaration Merging)

Tính năng của interface TypeScript: các interface cùng tên tự động hợp nhất các thuộc tính. Thường được sử dụng để mở rộng định nghĩa kiểu của thư viện bên thứ ba. Các interface được tạo bởi công cụ này có thể được hợp nhất với các interface cùng tên khác trong dự án, tạo điều kiện cho việc mở rộng kiểu từng bước.

tsconfig.json

Tệp cấu hình dự án TypeScript, nằm trong thư mục gốc của dự án. Chứa compilerOptions (target, module, strict, v.v.), include, exclude và các cài đặt khác. Các tệp .ts được tạo bởi công cụ này có thể được sử dụng trong bất kỳ dự án tsconfig chuẩn nào.

tryFixJSON

Hàm sửa lỗi JSON tích hợp của công cụ này, tự động xử lý dấu phẩy ở cuối, dấu nháy đơn thay cho dấu nháy kép, thiếu dấu ngoặc kép trong key, chú thích và các lỗi cú pháp JSON phổ biến khác. Được gọi tự động khi JSON.parse thất bại, thông báo cho người dùng sau khi sửa thành công và tiếp tục chuyển đổi.

Quy tắc ánh xạ từ kiểu JSON sang kiểu TypeScript

Các quy tắc đầy đủ mà hàm getTsType của công cụ chúng tôi suy luận kiểu TypeScript dựa trên hình thức của value JSON:

So sánh interface vs type alias

Lý do công cụ này tạo interface thay vì type alias, và sự khác biệt giữa chúng trong các dự án TypeScript:

Quy tắc tạo trường tùy chọn và readonly

Tác động của hai tùy chọn chuyển đổi của công cụ này lên mã được tạo và các tình huống sử dụng tối ưu:

Privacy & Security

Mọi thao tác của công cụ JSON sang TypeScript này được thực hiện hoàn toàn cục bộ trong trình duyệt của bạn: phân tích cú pháp JSON, suy luận kiểu, tạo interface đều được thực thi bởi JavaScript trình duyệt ở phía máy khách, không gửi nội dung JSON, tệp đã tải lên hoặc mã được tạo đến bất kỳ máy chủ nào qua mạng. Tải tệp sử dụng API FileReader gốc của trình duyệt để đọc trực tiếp vào bộ nhớ, không thông qua dịch vụ trung gian nào. Không sử dụng theo dõi Cookie, không thu thập bất kỳ dữ liệu đầu vào hoặc dữ liệu sử dụng nào của người dùng. Sau khi đóng hoặc làm mới trang, tất cả nội dung đầu vào và đầu ra sẽ tự động được xóa khỏi bộ nhớ. Phù hợp để xử lý JSON chứa khóa API, token, dữ liệu kinh doanh nhạy cảm.

Authoritative References

• TypeScriptTài liệu chính thức TypeScript interface
• TypeScriptSổ tay nhập môn TypeScript
• MDNĐặc tả JSON - MDN Web Docs
• TypeScriptTypeScript Playground dùng thử trực tuyến
• TypeScriptTham chiếu cấu hình tsconfig.json
• ZodZod - Thư viện xác thực schema ưu tiên TypeScript