Tại sao nên sử dụng các loại tĩnh trong JavaScript? (Hướng dẫn 4 phần về gõ tĩnh với Flow)


bởi Preethi Kasireddy

1*YJbUzd6InXYN8EGTIGEFOOA
Tín dụng hình ảnh

Là một nhà phát triển JavaScript, bạn có thể viết mã cả ngày mà không gặp phải bất kỳ loại tĩnh nào. Vậy tại sao phải bận tâm tìm hiểu về chúng?

Chà, hóa ra việc học các loại không chỉ là một bài tập để mở rộng tâm trí. Nếu bạn sẵn sàng đầu tư thời gian để tìm hiểu về các ưu điểm, nhược điểm và trường hợp sử dụng của các loại tĩnh, điều đó có thể giúp ích rất nhiều cho việc lập trình của bạn.

Quan tâm đến? Chà, bạn thật may mắn – đó là nội dung của phần còn lại của loạt bài gồm bốn phần này.

Đầu tiên, một định nghĩa

Cách nhanh nhất để hiểu các kiểu tĩnh là so sánh chúng với các kiểu động. Một ngôn ngữ với các kiểu tĩnh được gọi là ngôn ngữ gõ tĩnh. Mặt khác, một ngôn ngữ có kiểu động được gọi là gõ động ngôn ngữ.

Sự khác biệt cốt lõi là gõ tĩnh ngôn ngữ thực hiện kiểm tra loại tại thời gian biên dịchtrong khi gõ động ngôn ngữ thực hiện kiểm tra loại tại thời gian chạy.

Điều này để lại một khái niệm nữa để bạn giải quyết: “What does “kiểm tra loại” bần tiện?

Để giải thích, hãy xem các loại trong Java so với Javascript.

“Các loại” đề cập đến loại dữ liệu được xác định.

Ví dụ, trong Java nếu bạn định nghĩa một boolean như:

boolean result = true;

Điều này có một loại chính xác, bởi vì boolean chú thích khớp với giá trị được cung cấp cho resulttrái ngược với một số nguyên hoặc bất kỳ thứ gì khác.

Mặt khác, nếu bạn đã cố khai báo:

boolean result = 123;

…điều này sẽ không biên dịch được vì nó có kiểu không chính xác. Nó đánh dấu rõ ràng result như một booleannhưng sau đó định nghĩa nó là số nguyên 123.

JavaScript và các ngôn ngữ được nhập động khác có cách tiếp cận khác, cho phép ngữ cảnh xác định loại dữ liệu nào đang được xác định:

var result = true;

Tóm lại: các ngôn ngữ được nhập tĩnh yêu cầu bạn khai báo các kiểu dữ liệu của cấu trúc trước khi bạn có thể sử dụng chúng. Các ngôn ngữ được gõ động thì không. JavaScript ngụ ý loại dữ liệu, trong khi Java khẳng định nó hoàn toàn.

Như bạn có thể thấy, các loại cho phép bạn chỉ định chương trình bất biếnhoặc các xác nhận logic và điều kiện theo đó chương trình sẽ thực thi.

kiểm tra loại xác minh và thực thi rằng loại cấu trúc (hằng, boolean, số, biến, mảng, đối tượng) khớp với một bất biến mà bạn đã chỉ định. Ví dụ, bạn có thể chỉ định rằng “hàm này luôn trả về một chuỗi.” Khi chương trình chạy, bạn có thể chắc chắn rằng nó sẽ trả về một chuỗi.

Sự khác biệt giữa kiểm tra kiểu tĩnh và kiểm tra kiểu động quan trọng nhất khi xảy ra lỗi kiểu. Trong một ngôn ngữ được nhập tĩnh, lỗi loại xảy ra trong bước biên dịch, nghĩa là tại thời điểm biên dịch. Trong các ngôn ngữ được gõ động, các lỗi chỉ xảy ra khi chương trình được thực thi. Đó là, tại thời gian chạy.

Điều này có nghĩa là một chương trình được viết bằng ngôn ngữ được nhập động (như JavaScript hoặc Python) có thể biên dịch ngay cả khi chương trình đó chứa các lỗi loại có thể ngăn tập lệnh chạy đúng cách.

Mặt khác, nếu một chương trình được viết bằng ngôn ngữ kiểu tĩnh (như Scala hoặc C++) có lỗi kiểu, thì nó sẽ không biên dịch được cho đến khi lỗi được sửa.

Đọc thêm  Cách tìm nghịch đảo cộng của mỗi số trong JavaScript [CodeWars Challenge Solved]

Kỷ nguyên mới của JavaScript

Vì JavaScript là một ngôn ngữ kiểu động nên bạn có thể khai báo các biến, hàm, đối tượng và bất cứ thứ gì mà không cần khai báo kiểu.

Thuận tiện, nhưng không phải lúc nào cũng lý tưởng. Đó là lý do tại sao các công cụ như Flow và TypeScript gần đây đã bước vào để cung cấp cho các nhà phát triển JavaScript *tùy chọn* để sử dụng các loại tĩnh.

lưu lượng là một thư viện kiểm tra kiểu tĩnh mã nguồn mở do Facebook phát triển và phát hành, cho phép bạn thêm dần các kiểu vào mã JavaScript của mình.

bản đánh máy, mặt khác, là một superset biên dịch thành JavaScript — mặc dù nó gần giống như một ngôn ngữ được nhập tĩnh mới theo đúng nghĩa của nó. Điều đó nói rằng, nó trông và cảm thấy rất giống với JavaScript và không khó để tiếp thu.

Trong cả hai trường hợp, khi bạn muốn sử dụng các loại, bạn phải thông báo rõ ràng cho công cụ về (những) tệp cần kiểm tra loại. Đối với TypeScript, bạn thực hiện việc này bằng cách ghi tệp bằng .ts phần mở rộng thay vì .js. Đối với Flow, bạn bao gồm một nhận xét ở đầu tệp với @flow

Sau khi bạn đã khai báo rằng bạn muốn kiểm tra loại tệp, bạn có thể sử dụng cú pháp tương ứng của chúng để xác định loại. Một điểm khác biệt giữa hai công cụ là Flow là một loại “trình kiểm tra” chứ không phải trình biên dịch. Mặt khác, TypeScript là một trình biên dịch.

Tôi thực sự tin rằng các công cụ như Flow và TypeScript mang đến một chuyển đổi thế hệ và tiến bộ cho JavaScript.

Cá nhân tôi đã học được rất nhiều bằng cách sử dụng các loại hàng ngày. Đó là lý do tại sao tôi hy vọng bạn sẽ tham gia cùng tôi trong cuộc hành trình ngắn ngủi và ngọt ngào này đến với các kiểu tĩnh.

Phần còn lại của bài đăng gồm 4 phần này sẽ bao gồm:

Phần I. Giới thiệu nhanh về ngôn ngữ và cú pháp Flow

Phần II & III. Ưu điểm & Nhược điểm của các loại tĩnh (với các ví dụ hướng dẫn chi tiết)

Phần IV. Bạn có nên sử dụng các loại tĩnh trong JavaScript hay không?

Lưu ý rằng tôi đã chọn Flow over TypeScript trong các ví dụ trong bài đăng này vì tôi đã quen với nó. Đối với mục đích của riêng bạn, vui lòng nghiên cứu và chọn công cụ phù hợp với bạn. TypeScript cũng tuyệt vời.

Không chần chừ thêm nữa, chúng ta hãy bắt đầu!

Phần 1: Giới thiệu nhanh về ngôn ngữ và cú pháp Flow

Để hiểu những ưu điểm và nhược điểm của các loại tĩnh, trước tiên bạn nên hiểu cơ bản về cú pháp của các loại tĩnh bằng Flow. Nếu trước đây bạn chưa từng làm việc với ngôn ngữ được nhập tĩnh, cú pháp có thể mất một chút thời gian để làm quen.

Hãy bắt đầu bằng cách khám phá cách thêm các loại vào nguyên hàm JavaScript, cũng như các cấu trúc như Mảng, Đối tượng, Hàm, v.v.

boolean

Điều này mô tả một boolean giá trị (đúng hoặc sai) trong JavaScript.

Lưu ý rằng khi bạn muốn chỉ định một loại, cú pháp bạn sử dụng là:

1*Z79CcJO6h4DO_xKJMdK9zg

con số

Điều này mô tả một số dấu phẩy động IEEE 754. Không giống như nhiều ngôn ngữ lập trình khác, JavaScript không xác định các loại số khác nhau (như số nguyên, ngắn, dài và dấu phẩy động). Thay vào đó, các số luôn được lưu trữ dưới dạng số dấu phẩy động có độ chính xác kép. Do đó, bạn chỉ cần một loại số để xác định bất kỳ số nào.

number bao gồm InfinityNaN.

chuỗi

Điều này mô tả một chuỗi.

vô giá trị

Điều này mô tả các null kiểu dữ liệu trong JavaScript.

Đọc thêm  Mảng đảo ngược JavaScript – Hướng dẫn với mã JS mẫu

khoảng trống

Điều này mô tả các undefined kiểu dữ liệu trong JavaScript.

Lưu ý rằng nullundefined được đối xử khác nhau. Nếu bạn đã cố gắng làm:

Flow sẽ báo lỗi vì loại void được cho là thuộc loại undefined không giống với loại null.

Mảng

Mô tả một mảng JavaScript. Bạn sử dụng cú pháp Array<;T> để mô tả một mảng có các phần tử thuộc một số loại T

Chú ý cách tôi thay thế T với stringcó nghĩa là tôi đang tuyên bố messages như một mảng các chuỗi.

Vật

Điều này mô tả một đối tượng JavaScript. Có một số cách khác nhau để thêm loại vào đối tượng.

Bạn có thể thêm các loại để mô tả hình dạng của một đối tượng:

Bạn có thể định nghĩa các đối tượng dưới dạng bản đồ nơi bạn ánh xạ một chuỗi tới một giá trị nào đó:

Bạn cũng có thể định nghĩa một đối tượng là một Object loại:

Cách tiếp cận cuối cùng này cho phép chúng tôi đặt bất kỳ khóa và giá trị nào trên đối tượng của bạn mà không bị hạn chế, do đó, nó không thực sự bổ sung nhiều giá trị khi có liên quan đến kiểm tra kiểu.

không tí nào

Điều này có thể đại diện cho bất kỳ loại nào. Các any loại thực sự không được kiểm tra, vì vậy bạn nên cố gắng tránh sử dụng nó trừ khi thực sự cần thiết (chẳng hạn như khi bạn cần chọn không kiểm tra loại hoặc cần một cửa thoát hiểm).

Một tình huống bạn có thể tìm thấy any hữu ích khi sử dụng thư viện bên ngoài mở rộng các nguyên mẫu của hệ thống khác (như Object.prototype).

Ví dụ: nếu bạn đang sử dụng thư viện mở rộng Object.prototype bằng doSomething tài sản:

Bạn có thể gặp lỗi:

Để phá vỡ điều này, bạn có thể sử dụng any:

Chức năng

Cách phổ biến nhất để thêm loại vào hàm là thêm loại vào đối số đầu vào của nó và (nếu phù hợp) giá trị trả về:

Bạn thậm chí có thể thêm các loại vào các chức năng không đồng bộ (xem bên dưới) và trình tạo:

Lưu ý cách tham số thứ hai của chúng tôi getPurchaseLimit được chú thích là một hàm trả về một Promise. Và amountExceedsPurchaseLimit được chú thích cũng như trả lại một Promise.

Nhập bí danh

Loại bí danh là một trong những cách yêu thích của tôi để sử dụng các loại tĩnh. Chúng cho phép bạn sử dụng các loại hiện có (số, chuỗi, v.v.) để soạn các loại mới:

Ở trên, tôi đã tạo một loại mới gọi là PaymentMethod trong đó có các thuộc tính bao gồm numberstring các loại.

Bây giờ nếu bạn muốn sử dụng PaymentMethod gõ, bạn có thể làm:

Bạn cũng có thể tạo bí danh kiểu cho bất kỳ kiểu nguyên thủy nào bằng cách bọc kiểu bên dưới bên trong kiểu khác. Ví dụ: nếu bạn muốn nhập bí danh a NameEmailAddress:

Bằng cách này, bạn đang chỉ ra rằng NameEmail là những thứ riêng biệt, không chỉ là chuỗi. Vì tên và email không thực sự có thể hoán đổi cho nhau nên việc làm này sẽ ngăn bạn vô tình trộn lẫn chúng với nhau.

thuốc gốc

Generics là một cách để trừu tượng hóa các loại. Điều đó có nghĩa là gì?

Hãy cùng xem:

Tôi đã tạo một bản tóm tắt cho loại T. Bây giờ bạn có thể sử dụng bất kỳ loại nào bạn muốn đại diện T. Vì numberT, T thuộc loại number. Trong khi đó, đối với arrayTT thuộc loại Array<numbơ>.

Vâng tôi biết. Thật là chóng mặt nếu đây là lần đầu tiên bạn nhìn vào các loại. Tôi hứa phần giới thiệu “nhẹ nhàng” sắp kết thúc!

Có lẽ

Có lẽ loại cho phép chúng tôi gõ chú thích một khả năng null hoặc undefined giá trị. Họ có loại T|void|null cho một số loại Tcó nghĩa là nó là một trong hai loại T hoặc nó là undefined hoặc null. Để xác định một maybe type, bạn đặt dấu chấm hỏi trước định nghĩa type:

Đọc thêm  JavaScript viết hoa chữ cái đầu tiên – Cách viết hoa chữ cái đầu tiên trong một từ bằng JS

Ở đây tôi đang nói rằng thông điệp đó hoặc là một stringHoặc của nó null hoặc undefined.

Bạn cũng có thể sử dụng có thể để chỉ ra rằng một thuộc tính đối tượng sẽ là một trong hai loại T hoặc undefined:

Bằng cách đặt ? bên cạnh tên thuộc tính cho middleInitialbạn có thể chỉ ra rằng trường này là tùy chọn.

công đoàn rời rạc

Đây là một cách hiệu quả khác để lập mô hình dữ liệu. Các liên kết rời rạc rất hữu ích khi bạn có một chương trình cần xử lý tất cả các loại dữ liệu khác nhau cùng một lúc. Nói cách khác, hình dạng của dữ liệu có thể khác nhau tùy theo tình huống.

Mở rộng trên PaymentMethod nhập từ ví dụ chung trước đó của chúng tôi, giả sử bạn có một ứng dụng mà người dùng có thể có một trong ba loại phương thức thanh toán. Trong trường hợp này, bạn có thể làm điều gì đó như:

Sau đó, bạn có thể xác định loại Phương thức thanh toán của mình dưới dạng liên kết riêng biệt với ba trường hợp.

Phương thức thanh toán bây giờ chỉ có thể là một trong ba hình dạng này. Bất động sản type là thuộc tính làm cho kiểu kết hợp “rời rạc”.

Bạn sẽ thấy nhiều ví dụ thực tế hơn về các loại liên kết rời rạc sau trong phần II.

Được rồi, gần xong rồi. Có một số tính năng khác của Flow đáng được đề cập trước khi kết thúc phần giới thiệu này:

1) Loại suy luận: Luồng sử dụng suy luận kiểu nếu có thể. Loại suy luận bắt đầu khi trình kiểm tra loại có thể tự động suy ra loại dữ liệu của một biểu thức. Điều này giúp tránh chú thích quá mức.

Ví dụ: bạn có thể viết:

Mặc dù Lớp này không có loại, nhưng Flow có thể kiểm tra loại đầy đủ:

Ở đây tôi đã cố gắng xác định area như một stringnhưng trong Rectangle định nghĩa lớp chúng tôi định nghĩa widthheight như những con số. Vì vậy, dựa trên định nghĩa hàm cho areanó phải được trả về a number. Mặc dù tôi đã không xác định rõ ràng các loại cho area chức năng, Flow đã bắt lỗi.

Một điều cần lưu ý là những người duy trì Luồng khuyên rằng nếu bạn đang xuất định nghĩa lớp này, bạn nên thêm các định nghĩa kiểu rõ ràng để dễ dàng tìm ra nguyên nhân gây ra lỗi khi lớp không được sử dụng trong ngữ cảnh cục bộ.

2) Kiểm tra kiểu động: Điều này về cơ bản có nghĩa là Flow có logic để xác định loại giá trị sẽ là gì trong thời gian chạy và do đó có thể sử dụng kiến ​​thức đó khi thực hiện phân tích tĩnh. Chúng trở nên hữu ích trong các tình huống như khi Flow đưa ra lỗi nhưng bạn cần thuyết phục Flow rằng những gì bạn đang làm là đúng.

Tôi sẽ không đi sâu vào chi tiết vì đây là một tính năng nâng cao hơn mà tôi hy vọng sẽ viết riêng, nhưng nếu bạn muốn tìm hiểu thêm, bạn nên đọc qua các tài liệu.

Chúng tôi đã hoàn thành với cú pháp

Chúng tôi bao phủ rất nhiều nền tảng trong một phần! Tôi hy vọng tổng quan cấp cao này hữu ích và dễ quản lý. Nếu bạn tò mò muốn tìm hiểu sâu hơn, tôi khuyến khích bạn tìm hiểu kỹ các tài liệu được viết tốt và khám phá.

Với cú pháp không còn nữa, cuối cùng chúng ta hãy đến phần thú vị: khám phá những ưu điểm và nhược điểm của việc sử dụng các loại!

Tiếp theo: Phần 2 & 3.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status