Sử dụng TypeScript một cách nhất quán mang lại rất nhiều lợi ích, đặc biệt là để viết mã sạch để tránh các lỗi và lỗi không cần thiết. Nhưng phải mất một chút thời gian và nỗ lực để tìm hiểu và bạn phải điều chỉnh từng đoạn mã sau khi sao chép từ hướng dẫn hoặc ví dụ về StackOverflow. Khá là một thách thức khi sử dụng lại mã cho React, Node, Express và Mongoose như tôi đã làm trong dự án phụ ứng dụng web full-stack của mình
Các lựa chọn thay thế cho TypeScript
Phổ biến, nhưng vô ích, thay thế. không quan tâm chút nào
Sử dụng eslint, nhưng đó không phải là giải pháp thay thế. Dù có hay không gõ mạnh, bạn vẫn nên viết mã của mình để hưởng lợi từ [hầu hết] các gợi ý và cảnh báo hữu ích
ReactPropTypes thêm một số loại kiểm tra vào ECMAScript/JavaScript trong các ứng dụng React, nhưng PropTypes chỉ là chú thích cuối trang, được đặt cách xa nơi chúng sẽ hữu ích nhất, trong khi vẫn làm đầy mã của bạn
Và không có PropTypes trong Vanilla JS
- nhập JSDoc
JSDoc
Thường bị bỏ qua, thậm chí có thể chưa từng được nghe đến cho đến bây giờ, JSDoc xứng đáng được chú ý nhiều hơn, vì nó mang lại rất nhiều lợi thế từ một số dòng tài liệu ngắn
Tài liệu mã
Đó là mục đích ban đầu của JSDoc. tạo tài liệu mã/API từ một vài dòng được đặt trước các biến, hàm và lớp
Các cách tiếp cận tương tự đã được sử dụng với Java và PHP trong một thời gian dài và JSDoc tuân theo thông lệ đã được thiết lập và khá dễ học
Gợi ý và hoàn thành mã
Sử dụng JSDoc bên trong một IDE hiện đại, bạn sẽ nhận được một lợi ích khác. kiểm tra mã trực tiếp, cảnh báo và hoàn thành mã phù hợp ngay cả đối với các phương thức DOM khó hiểu nhất mà bạn chưa từng biết trước đây. Hay những tác phẩm kinh điển nổi tiếng như event.currentTarget vẫn còn một số cạm bẫy khó hiểu
Đây là một - có vẻ đơn giản - ví dụ
Tôi muốn cho phép đóng hộp thoại phương thức bằng cách gõ phím Escape. Kịch bản kiểu mã nhanh giống như năm 1999 đầu tiên của tôi [không được hiển thị ở đây] đã bị eslint phản đối. ☹️
Viết mã JS Vanilla hiện đại, sạch sẽ
Vì vậy, tôi quyết định viết mã phù hợp, hiện đại, nhưng vẫn đơn giản là "Vanilla JS" [không cần bộ chuyển mã để tạo mã hoạt động, không giống như TypeScript, không có hỗ trợ trình duyệt gốc, thậm chí không có trong trình duyệt Edge của Microsoft]
Tôi đã viết một hàm nhận hai đối số. một sự kiện và một phần tử DOM tùy chọn để chúng tôi có thể đóng một hộp thoại phương thức cụ thể từ bên ngoài mà không cần dựa vào bối cảnh sự kiện
Thêm một bình luận JSDoc trước đó, nó sẽ trở thành
/**
* close an open modal dialog
* @param {MouseEvent} event
* @param {HTMLElement=} elementToClose
*/
const modalClose = function modalClose[event, elementToClose] {
// ...
};
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
nói với độc giả của tôi [về mã này và về tài liệu tham khảo/API có thể được tạo tự động, có thể] về chức năng phải làm và những đối số mà nó mong đợi
@param {MouseEvent} event
Bây giờ IDE của tôi [PhpStorm] sẽ hiển thị cho tôi thông tin hữu ích
Tôi thậm chí không phải tra cứu chuỗi loại thích hợp để viết trong bình luận JSDoc
Khi tôi bắt đầu nhập, PhpStorm có một số đề xuất để hoàn thành mã ngay cả trong loại nhận xét đặc biệt này, đề xuất MouseEvent ở đầu danh sách
Cú pháp JSDoc
Cú pháp cơ bản khá đơn giản
Các khối chú thích là những chú thích đặc biệt bắt đầu bằng dấu gạch chéo và dấu hoa thị kép /**
Gợi ý tham số bắt đầu bằng ký hiệu at, từ "param" và định nghĩa kiểu bên trong dấu ngoặc nhọn, theo sau là tên của tham số
Để đánh dấu một tham số tùy chọn, hãy thêm một dấu bằng đằng sau loại, chẳng hạn như
@param {HTMLElement=} elementToClose
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
nhưng để người đọc hiểu rõ hơn, chúng ta cũng có thể thêm bất kỳ thứ gì vào sau tên của tham số, chẳng hạn như
@param {HTMLElement=} elementToClose [optional] DOM element to receive .closed CSS class
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ trình soạn thảo của tôi hiển thị cho tôi các chú thích loại, đó không phải là một phần của mã được viết của tôi [không giống như chúng sẽ có trong TypeScript] mà hoàn toàn tuân theo mã của tôi. Vì vậy, mã thực tế của tôi vẫn ngắn và gọn, trong khi ý nghĩa ẩn vẫn rõ ràng hơn trước
Hỗ trợ cho các nhà phát triển lười biếng
Chúng tôi không chỉ thấy gợi ý bổ sung event: MouseEvent, mà khi chúng tôi bắt đầu sử dụng event trong mã bên dưới, sẽ có nhiều đề xuất mã hơn, giúp chúng tôi chọn các phương thức và thuộc tính thực sự khả dụng và không bị phản đối
Hỗ trợ thêm khi chúng tôi tiếp tục. gợi ý và tài liệu ở khắp mọi nơi. Chúng tôi thậm chí không phải truy cập MDN trong trình duyệt của mình nữa
Phần kết luận
JSDoc làm cho việc viết mã bằng JavaScript dễ dàng hơn, giúp chúng ta viết mã nhanh chóng đồng thời tránh được các lỗi rõ ràng, chỉ bằng cách thêm một số dòng nhận xét tùy chọn vào mã của chúng ta