Static Type Checking trong React là gì? Khám phá ngay

Trình kiểm tra kiểu tĩnh như Flow và TypeScript xác định một số loại vấn đề nhất định trước khi bạn chạy mã của mình. Họ cũng có thể cải thiện quy trình làm việc của nhà phát triển bằng cách thêm các tính năng như tự động hoàn thành. Vì lý do này, chúng tôi khuyên bạn nên sử dụng Flow hoặc TypeScript thay vì PropTypescho các cơ sở mã lớn hơn.

Flow

Flow là một trình kiểm tra kiểu tĩnh cho mã JavaScript của bạn. Nó được phát triển tại Facebook và thường được sử dụng với React. Nó cho phép bạn chú thích các biến, hàm và các thành phần React bằng cú pháp kiểu đặc biệt và phát hiện sớm các lỗi. Bạn có thể đọc phần giới thiệu về Flow để tìm hiểu những điều cơ bản về nó.

Để sử dụng Flow, bạn cần:

• Thêm Luồng vào dự án của bạn dưới dạng phụ thuộc.
• Đảm bảo rằng cú pháp Flow được loại bỏ khỏi mã đã biên dịch.
• Thêm chú thích loại và chạy Flow để kiểm tra chúng.

Chúng tôi sẽ giải thích chi tiết các bước này bên dưới.

Thêm luồng vào dự án

Đầu tiên, điều hướng đến thư mục dự án của bạn trong thiết bị đầu cuối. Bạn sẽ cần chạy lệnh sau:

Nếu bạn sử dụng Yarn , hãy chạy:

yarn add --dev flow-bin

Nếu bạn sử dụng npm , hãy chạy:

npm install --save-dev flow-bin

Lệnh này cài đặt phiên bản Flow mới nhất vào dự án của bạn.

Bây giờ, hãy thêm flowvào "scripts"phần của bạn package.jsonđể có thể sử dụng phần này từ thiết bị đầu cuối:

{
  // ...
  "scripts": {
    "flow": "flow",    // ...
  },
  // ...
}

Cuối cùng, chạy một trong các lệnh sau:

Nếu bạn sử dụng Yarn , hãy chạy:

yarn run flow init

Nếu bạn sử dụng npm , hãy chạy:

npm run flow init

Lệnh này sẽ tạo một tệp cấu hình Flow mà bạn sẽ cần phải cam kết.

Tách cú pháp luồng khỏi mã đã biên dịch

Flow mở rộng ngôn ngữ JavaScript với một cú pháp đặc biệt cho các chú thích kiểu. Tuy nhiên, các trình duyệt không biết cú pháp này, vì vậy chúng tôi cần đảm bảo rằng nó không nằm trong gói JavaScript đã biên dịch được gửi đến trình duyệt.

Cách chính xác để làm điều này phụ thuộc vào các công cụ bạn sử dụng để biên dịch JavaScript.

Tạo ứng dụng React

Nếu dự án của bạn được thiết lập bằng Create React App , xin chúc mừng! Chú thích Luồng đã bị loại bỏ theo mặc định, vì vậy bạn không cần phải làm bất kỳ điều gì khác trong bước này.

Nếu bạn đã định cấu hình Babel theo cách thủ công cho dự án của mình, bạn sẽ cần cài đặt một giá trị đặt trước đặc biệt cho Flow.

Nếu bạn sử dụng Yarn, hãy chạy:

yarn add --dev @babel/preset-flow

Nếu bạn sử dụng npm, hãy chạy:

npm install --save-dev @babel/preset-flow

Sau đó, thêm flowcài đặt trước vào cấu hình Babel của bạn . Ví dụ: nếu bạn định cấu hình Babel thông qua .babelrctệp, nó có thể giống như sau:

{
  "presets": [
    "@babel/preset-flow",    "react"
  ]
}

Điều này sẽ cho phép bạn sử dụng cú pháp Luồng trong mã của mình.

Thêm chú thích loại luồng

Theo mặc định, Flow chỉ kiểm tra các tệp bao gồm chú thích này:

// @flow

Thông thường, nó được đặt ở đầu tệp. Hãy thử thêm nó vào một số tệp trong dự án của bạn và chạy yarn flowhoặc npm run flowđể xem Flow đã tìm thấy bất kỳ vấn đề nào chưa.

Ngoài ra còn có một tùy chọn để buộc Flow kiểm tra tất cả các tệp bất kể chú thích là gì. Điều này có thể quá ồn ào đối với các dự án hiện có, nhưng là hợp lý đối với một dự án mới nếu bạn muốn nhập đầy đủ bằng Flow.

TypeScript

TypeScript là một ngôn ngữ lập trình được phát triển bởi Microsoft. Nó là một tập hợp JavaScript được đánh máy và bao gồm trình biên dịch riêng của nó. Là một ngôn ngữ được đánh máy, TypeScript có thể bắt lỗi và lỗi tại thời điểm xây dựng, rất lâu trước khi ứng dụng của bạn hoạt động. Bạn có thể tìm hiểu thêm về cách sử dụng TypeScript với React tại đây .

Để sử dụng TypeScript, bạn cần:

• Thêm TypeScript làm phụ thuộc vào dự án của bạn
• Định cấu hình các tùy chọn trình biên dịch TypeScript
• Sử dụng các phần mở rộng tệp phù hợp
• Thêm định nghĩa cho các thư viện bạn sử dụng

Chúng ta hãy xem xét những điều này một cách chi tiết.

Sử dụng TypeScript với Tạo ứng dụng React

Tạo ứng dụng React hỗ trợ TypeScript.

Để tạo một dự án mới với sự hỗ trợ của TypeScript, hãy chạy:

npx create-react-app my-app --template typescript

yarn add --dev typescript

npm install --save-dev typescript

{
  // ...
  "scripts": {
    "build": "tsc",    // ...
  },
  // ...
}

yarn run tsc --init

npx tsc --init