bởi Preethi Kasireddy Là một nhà phát triển JavaScript, bạn có thể viết mã suốt cả ngày mà không gặp bất kỳ loại tĩnh nào. Vậy tại sao phải học hỏi về họ? Vâng, hóa ra các loại học tập không chỉ là một bài tập trong việc mở rộng tâm trí. Nếu bạn sẵn sàng đầu tư một chút thời gian vào việc tìm hiểu về các loại tĩnh, lợi thế, bất lợi và sử dụng các trường hợp, nó có thể giúp chương trình của bạn vô cùng. Quan tâm đến? Chà, bạn đã may mắn-đó là những gì phần còn lại của loạt bài bốn phần này nói về. Cách nhanh nhất để hiểu các loại tĩnh là đối chiếu chúng với các loại động. Một ngôn ngữ với các loại tĩnh được gọi là ngôn ngữ được gõ tĩnh. Mặt khác, một ngôn ngữ với các loại động được gọi là ngôn ngữ được gõ động.statically-typed language. On the other hand, a language with dynamic types is referred to as a dynamically-typed language. Sự khác biệt cốt lõi là các ngôn ngữ được loại tĩnh thực hiện kiểm tra loại tại thời điểm biên dịch, trong khi các ngôn ngữ được tính tự động thực hiện kiểm tra loại khi chạy.statically-typed
languages perform type checking at compile time, while dynamically-typed languages perform type checking at runtime. Điều này để lại một khái niệm nữa để bạn giải quyết: có nghĩa là gì khi kiểm tra loại hình?type-checking” mean? Để giải thích, hãy để Lôi nhìn vào các loại trong Java so với JavaScript. Các loại trực tuyến đề cập đến loại dữ liệu được xác định. refers to the type of data being defined. Ví dụ, trong Java nếu bạn xác định Điều này có một loại chính xác, bởi vì chú thích Mặt khác, nếu bạn cố gắng khai báo: Điều này sẽ không biên dịch vì nó có một loại không chính xác. Nó rõ ràng đánh dấu JavaScript và các ngôn ngữ được loại động khác có một cách tiếp cận khác, cho phép bối cảnh thiết lập loại dữ liệu đang được xác định: Câu chuyện dài: Các ngôn ngữ được loại hình tĩnh yêu cầu bạn khai báo các loại dữ liệu của các cấu trúc của bạn trước khi bạn có thể sử dụng chúng. Ngôn ngữ được gõ tự động thì không. JavaScript ngụ ý kiểu dữ liệu, trong khi Java tuyên bố nó hoàn toàn. Vì vậy, 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ến hoặc các xác nhận và điều kiện logic theo đó chương trình sẽ thực hiện.invariants, or the logical assertions and conditions under which the program will execute. Kiểm tra loại xác minh và thực thi rằng loại cấu trúc [hằng số, boolean, số, biến, mảng, đối tượng] phù hợp với một bất biến mà bạn đã chỉ định. Ví dụ, bạn có thể chỉ định rằng chức năng này luôn trả về một chuỗi. Khi chương trình chạy, bạn có thể giả sử một cách an toàn rằng nó sẽ trả về một chuỗi. verifies and enforces that
the type of a construct [constant, boolean, number, variable, array, object] matches an invariant that you’ve specified. You might, for example, specify that “this function always returns a string.” When the program runs, you can safely assume that it will return a string. Sự khác biệt giữa kiểm tra loại tĩnh và kiểm tra loại động nhất khi xảy ra lỗi loại. Trong một ngôn ngữ được gõ tĩnh, các 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 xy bằng động, các lỗi chỉ xảy ra khi chương trình được thực thi. Đó là, vào thời gian chạy.runtime. Điều này có nghĩa là một chương trình được viết bằng ngôn ngữ được gõ động [như JavaScript hoặc Python] có thể biên dịch ngay cả khi nó chứa các lỗi loại có thể ngăn tập lệnh chạy đúng.Đầu tiên, một định nghĩa
boolean
là:boolean result = true;
boolean
phù hợp với giá trị được cung cấp cho result
, trái ngược với số nguyên hoặc bất cứ điều gì khác.boolean result = 123;
result
là boolean
, nhưng sau đó định nghĩa nó là số nguyên 123
.var result = true;
Mặt khác, nếu một chương trình được viết bằng ngôn ngữ được gõ tĩnh [như Scala hoặc C ++] có chứa các lỗi loại, nó sẽ không biên dịch cho đến khi các lỗi đã được sửa.
Một kỷ nguyên mới của JavaScript
Bởi vì JavaScript là một ngôn ngữ được gõ động, bạn có thể đi về việc khai báo các biến, hàm, đối tượng và bất cứ điều gì mà không cần khai báo loại.
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.
Flow là một thư viện kiểm tra loại tĩnh nguồn mở do Facebook phát triển và phát hành cho phép bạn thêm các loại vào mã JavaScript của bạn. is an open-source static type checking library developed and released by Facebook that allows you to incrementally add types to your JavaScript code.
Mặt khác, TypeScript là một superset biên dịch xuống JavaScript-mặc dù nó có cảm giác gần giống như một ngôn ngữ được gõ 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ó để nhận., on the other hand, is a superset that compiles down to JavaScript — although it feels almost like a new statically-typed language in its own right. That said, it looks and feels very similar to JavaScript and isn’t hard to pick up.
Trong cả hai trường hợp, khi bạn muốn sử dụng các loại, bạn rõ ràng cho công cụ về [các] tệp nào để kiểm tra loại. Đối với TypeScript, bạn thực hiện điều này bằng cách viết các tệp với tiện ích mở rộng .ts
thay vì boolean result = true;
0. Đối với Flow, bạn bao gồm một nhận xét trên đầu tệp với boolean result = true;
1
Khi bạn đã tuyên bố rằng bạn muốn kiểm tra lại một tệp, bạn sẽ sử dụng cú pháp tương ứng của họ để xác định các loại. Một điểm khác biệt để tạo ra giữa hai công cụ là luồng là một loại kiểm tra loại và không phải là trình biên dịch. TypeScript, mặt khác, 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 thể hiện sự thay đổi và tiến bộ thế hệ 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 trong ngày của tôi. Đó là lý do tại sao tôi hy vọng bạn sẽ tham gia cùng tôi trên hành trình ngắn và ngọt ngào này thành các loại tĩnh.
Phần còn lại của bài đăng 4 phần này sẽ bao gồm:
Phần I. Một đoạn giới thiệu nhanh về cú pháp và ngôn ngữ dòng chảy
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ụ đi bộ 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 luồng qua các bản thảo trong các ví dụ trong bài đăng này vì sự quen thuộc của tôi với nó. Đối với mục đích của riêng bạn, xin vui lòng nghiên cứu và chọn công cụ phù hợp cho bạn. TypeScript cũng là tuyệt vời.
Không có gì khó chịu, hãy để bắt đầu!
Phần 1: Giới thiệu nhanh về cú pháp và ngôn ngữ
Để hiểu được 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 có được sự hiểu biết cơ bản về cú pháp cho các loại tĩnh bằng cách sử dụng luồng. Nếu bạn không bao giờ làm việc bằng ngôn ngữ được gõ tĩnh trước đây, 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 các nguyên thủy JavaScript, cũng như các cấu trúc như mảng, đối tượng, chức năng, v.v.
boolean
Điều này mô tả giá trị boolean
[đú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à:
con số
Điều này mô tả số điểm nổi của IEEE 754. Không giống như nhiều ngôn ngữ lập trình khác, JavaScript không định nghĩa các loại số khác nhau [như số nguyên, các điểm ngắn, dài và nổi]. Thay vào đó, các số luôn được lưu trữ dưới dạng số điểm nổi 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.
boolean result = true;
3 bao gồm boolean result = true;
4 và boolean result = true;
5.
sợi dây
Điều này mô tả một chuỗi.
null
Điều này mô tả kiểu dữ liệu boolean result = true;
6 trong JavaScript.
void
Điều này mô tả kiểu dữ liệu boolean result = true;
7 trong JavaScript.
Lưu ý rằng boolean result = true;
6 và boolean result = true;
7 được đối xử khác nhau. Nếu bạn đã cố gắng làm:
Lưu lượng sẽ gây ra lỗi vì loại boolean
0 được cho là loại boolean result = true;
7 không giống với loại boolean result = true;
6.
Mảng
Mô tả một mảng JavaScript. Bạn sử dụng cú pháp ________ 23; T> để mô tả một mảng có các phần tử của một số ____24Type T.
Lưu ý cách tôi thay thế boolean
5 bằng boolean
6, điều đó có nghĩa là tôi đã khai báo boolean
7 như một loạt các chuỗi.
Sự vật
Điều này mô tả một đối tượng JavaScript. Có một vài cách khác nhau để thêm các loại vào các đố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 là bản đồ nơi bạn ánh xạ một chuỗi đến một số giá trị:
Bạn cũng có thể định nghĩa một đối tượng là loại boolean
8:
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ự thêm nhiều giá trị khi liên quan đến việc kiểm tra loại.
không tí nào
Điều này có thể đại diện cho bất kỳ loại. Loại boolean
9 không được kiểm soát một cách hiệu quả, 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 [như khi bạn cần từ chối 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ể thấy boolean
9 hữu ích là 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 với thuộc tính result
1:
Bạn có thể gặp lỗi:
Để phá vỡ điều này, bạn có thể sử dụng boolean
9:
Chức năng
Cách phổ biến nhất để thêm các loại vào các chức năng là thêm các loại vào các đối số đầu vào của nó và [khi có liên quan] 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 Async [xem bên dưới] và Trình tạo:
Lưu ý cách tham số thứ hai của chúng tôi result
3 được chú thích là một hàm trả về result
4. Và result
5 được chú thích cũng như trả lại result
4.
Loại 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 có tên result
7 có các thuộc tính bao gồm các loại boolean result = true;
3 và boolean
6.
Bây giờ nếu bạn muốn sử dụng loại result
7, bạn có thể làm:
Bạn cũng có thể tạo các bí danh loại cho bất kỳ nguyên thủy nào bằng cách gói loại bên trong loại khác. Ví dụ: nếu bạn muốn nhập bí danh là boolean result = 123;
1 và boolean result = 123;
2:
Bằng cách này, bạn đã chỉ ra rằng boolean result = 123;
1 và boolean result = 123;
4 là những thứ riêng biệt, không chỉ là chuỗi. Vì một cái tên và email aren thực sự có thể hoán đổi cho nhau, làm điều này ngăn bạn vô tình trộn chúng lên.
Generics
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 để một cái nhìn:
Tôi đã tạo ra một sự trừu tượng cho loại boolean
5. Bây giờ bạn có thể sử dụng bất kỳ loại nào bạn muốn đại diện cho boolean
5. Đối với boolean result = 123;
7, boolean
5 thuộc loại boolean result = true;
3. Trong khi đó, đối với result
0, T thuộc loại ____ 51er>.
Vâng tôi biết. Đó là thứ 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 với phần giới thiệu nhẹ nhàng của người Viking đã gần kết thúc!
Có lẽ
Có thể loại cho phép chúng tôi nhập giá trị có khả năng boolean result = true;
6 hoặc boolean result = true;
7. Họ có loại result
4 cho một số loại boolean
5, có nghĩa là đó là loại boolean
5 hoặc nó là boolean result = true;
7 hoặc boolean result = true;
6. Để xác định loại result
9, bạn đặt một dấu hỏi ở phía trước định nghĩa loại:
Ở đây tôi nói rằng thông điệp đó là boolean
6, hoặc nó boolean result = true;
6 hoặc boolean result = true;
7.
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ẽ thuộc một số loại boolean
5 hoặc boolean result = true;
7:
Bằng cách đặt boolean
5 bên cạnh tên thuộc tính cho boolean
6, bạ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 mạnh mẽ khác để mô hình hóa dữ liệu. Các công đoàn rời rạc rất hữu ích khi bạn có một chương trình cần xử lý 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 dựa trên tình huống.
Mở rộng về loại result
7 từ ví dụ chung trước đây của chúng tôi, hãy nói rằng bạn có một ứng dụng nơi 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 một cái gì đó như:
Sau đó, bạn có thể xác định loại thanh toán của mình là một liên kết rời rạc 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. Tài sản boolean
8 là tài sản tạo ra loại liên minh khác nhau.
Bạn sẽ thấy các ví dụ thực tế hơn về các loại liên minh rời rạc sau này trong Phần II.
Được rồi, gần như đã hoàn thành. Có một vài 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: Flow sử dụng loại suy luận nếu có thể. Loại suy luận khởi động 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.: Flow uses type inference where possible. Type inference kicks in when the type checker can automatically deduce the data type of an expression. This helps avoid excessive annotation.
Ví dụ: bạn có thể viết:
Mặc dù lớp này không có các loại, Flow có thể gõ đầy đủ kiểm tra nó:
Ở đây, tôi đã cố gắng xác định boolean
9 là boolean
6, nhưng trong định nghĩa lớp 123
1, chúng tôi đã định nghĩa 123
2 và 123
3 là số. Vì vậy, dựa trên định nghĩa hàm cho boolean
9, nó phải được trả về boolean result = true;
3. Mặc dù tôi đã xác định rõ ràng các loại cho hàm boolean
9, Flow đã bắt gặp lỗi.
Một điều cần lưu ý là những người bảo trì luồng khuyến nghị rằng nếu bạn đang xuất định nghĩa lớp này, bạn sẽ muốn thêm các định nghĩa loại rõ ràng để dễ dàng tìm thấy nguyên nhân của lỗi khi lớp không được sử dụng trong bối cảnh cục bộ.
2] Các thử nghiệm loại động: Điều này về cơ bản là dòng chảy có logic để xác định loại giá trị sẽ là gì khi 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 dòng chảy gây ra lỗi nhưng bạn cần thuyết phục Flow rằng những gì bạn làm là đúng.: What this basically means is that Flow has logic to determine what the the type of a value will be at runtime and so is able to use that knowledge when performing static analysis. They become useful in situations like when Flow throws an error but you need to convince flow that what you’re doing is right.
Tôi đã giành chiến thắng trong quá nhiều chi tiết bởi vì nó có nhiều tính năng nâng cao 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, thì nó đáng để đọ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 mặt đất trong một phần! Tôi hy vọng tổng quan cấp cao này đã hữu ích và có thể quản lý được. Nếu bạn tò mò muốn đi sâu hơn, tôi khuyến khích bạn đi sâu vào các tài liệu được viết tốt và khám phá.
Với cú pháp tránh xa, cuối cùng hãy để có được 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.
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu