Kiểm tra kiểu tĩnh với luồng
Một điều buồn cười xảy ra khi bạn lộn xộn với Flow (thư viện kiểm tra kiểu tĩnh của Facebook) trong vài phút. Việc gõ JavaScript bắt đầu cảm thấy đơn giản, hữu ích và - ta có dám nói không? - vui vẻ.
Xem cho chính mình.
FWIW, Flow là một đối tác tốt cho React, nhưng nó hoạt động giống như một sự quyến rũ trong bất kỳ ngữ cảnh JS nào.
Cài đặt
$ cd vào dự án just-messing yêu thích của bạn hoặc sử dụng công cụ React CLI để nhanh chóng $ create-react-app something-disposable .
Trong cả hai trường hợp, từ folder root , bạn cần chạy các lệnh sau:
$ npm i -D flow-bin $ flow init Tóm lại, đó là cài đặt. Cài đặt Luồng. Tạo một file .flowconfig trống (ít nhất cho phần giới thiệu này). Bạn tiến hành như thế nào từ đó có một chút lựa chọn.
- Bạn đã sử dụng
create-react-appdụngcreate-react-app? Mát mẻ. Nó hoạt động với Flow một cách tự động. - Sử dụng cấu hình Babel của bạn ? Chạy
$ npm i -D transform-flow-strip-typesvà sau đó thêm"plugins": [transform-flow-strip-types]vào.babelrccủa bạn để (như tên gợi ý) các loại Dòng chảy từ mã của bạn. Không chuyển ngữ? Cũng tuyệt, nhưng bạn sẽ phải sử dụng cú pháp comment đặc biệt được đề cập ở cuối bài viết này.
Điều cần nhớ là Flow chỉ là một công cụ để xác minh tính toàn vẹn của ứng dụng của bạn. Các trình thông dịch JavaScript không biết phải làm gì với các chú thích của nó - vì vậy chúng phải biến mất trước thời gian chạy.
Sử dụng
Bây giờ dự án của bạn đã có Flow, đã đến lúc bắt đầu hoạt động. Trước tiên, bạn cần gắn thẻ các file bạn muốn nhập kiểm tra bằng cách đặt comment sau ở đầu mỗi file :
/* @flow */ Flow chạy một server để giữ cho các séc của bạn tăng dần và chạy nhanh khi bạn thay đổi mã của bạn . Bắt đầu nó bằng cách chạy $ flow trong dự án của bạn. Đến đây bạn có thể thực hiện kiểm tra tại bất kỳ điểm nào với cùng một lệnh. Bạn sẽ nhận được một cách cực kỳ hài lòng No errors! phản hồi hoặc phân tích chơi theo cách chơi như thế này:
Luồng sử dụng chú thích để giao tiếp các loại. Chúng trực quan, nhưng có thể chi tiết và phức tạp như bạn muốn. Một vài ví dụ:
let name: string = "Ol' Bonesnapper"; let age: number = 32; let hungry: boolean = true; let faves: string[] = ['tires', 'nutria']; let eyes: {left: string, right: string} = {left: 'blind', right: 'good'}; Các chức năng hoạt động tương tự, nhưng có một số điểm tò mò của riêng chúng.
function chomp(food: string): string { // We're annotating both the input and the output return name + ' ate a ' + food; } Flow cũng hoạt động tốt với các giá trị theo nghĩa đen (chẳng hạn như let foodSpecies: 'Myocastor coypus' = 'Myocastor coypus' ), các lớp và nhiều loại vượt quá phạm vi của mồi này. Tin tốt là group đã làm rất tốt về các tài liệu .
Đó là nó cho những điều cơ bản.
Đối với cú pháp comment mà ta đã đề cập ở trên, nó sẽ làm cho chú thích Luồng của bạn ẩn đối với trình thông dịch JS, điều này thật tuyệt nếu bạn không tìm hiểu quá trình biên dịch, nhưng nó hơi phức tạp khi triển khai, điều này ít tuyệt vời hơn nếu bạn là Nhân loại. Nó trông như thế này:
let name/*: string */= "Ol' Bonesnapper"; let age/*: number */= 32; let hungry/*: boolean */= true; let faves/*: string[] */= ['tires', 'nutria']; let eyes/*: {left: string, right: string} */= {left: 'blind', right: 'good'}; function chomp(food/*: string*/)/*: string*/ { return name + ' ate a ' + food; } 👉 Lời cho người khôn ngoan: Dòng chảy là một công cụ sâu sắc và mạnh mẽ. Ta chỉ mới chỉ sơ lược về bề mặt ở đây, nhưng phần lớn vẻ đẹp của nó nằm ở thiết kế “những khoảnh khắc để học, vài tuần để làm chủ”.
Các tin liên quan
