Tiếng Việt

Hướng dẫn ReactJS

Hooks

Chức năng nâng cao của ReactJS

Khái niệm bổ sung

Kiểm tra Loại Tĩnh trong ReactJS

Xin chào các nhà phát triển React tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới kiểm tra loại tĩnh trong ReactJS. Là một giáo viên khoa học máy tính ở khu phố gần bạn, tôi ở đây để hướng dẫn bạn qua khái niệm quan trọng này, từng bước một. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao!

ReactJS - Static Type Checking

Kiểm tra Loại Tĩnh Là Gì?

Trước khi chúng ta đi sâu vào chi tiết của ReactJS, hãy hiểu xem kiểm tra loại tĩnh là gì. Hãy tưởng tượng bạn đang nướng bánh. Bạn sẽ không sử dụng muối thay vì đường, phải không? Điều đó là vì bạn biết loại nguyên liệu bạn cần. Kiểm tra loại tĩnh cũng tương tự - nó giúp chúng ta sử dụng đúng loại dữ liệu trong mã của mình.

Trong lập trình, kiểm tra loại tĩnh là quá trình xác minh các loại của biến, tham số hàm và giá trị trả về trước khi mã được thực thi. Nó giống như có một người bạn giúp kiểm tra công thức của bạn trước khi bạn bắt đầu nướng bánh!

Tại Sao Sử Dụng Kiểm Tra Loại Tĩnh trong React?

Bây giờ, bạn có thể đang tự hỏi, "Tại sao chúng ta cần điều này trong React?" Hãy để tôi kể cho bạn một câu chuyện nhỏ. Ngày xưa, trong một vùng đất xa xôi (đúng vậy, chỉ là ở công việc trước đây của tôi), chúng tôi có một dự án React lớn. Mọi thứ đều ổn cho đến khi chúng tôi bắt đầu gặp lỗi kỳ lạ trong sản xuất. Cuối cùng hóa ra là chúng tôi đã truyền sai loại dữ liệu cho một số thành phần. Nếu chỉ chúng tôi đã sử dụng kiểm tra loại tĩnh, chúng tôi có thể đã phát hiện ra những vấn đề này sớm!

Kiểm tra loại tĩnh trong React giúp chúng ta:

  1. Phát hiện lỗi sớm trong quá trình phát triển
  2. Cải thiện chất lượng và khả năng đọc mã
  3. Cung cấp tài liệu tốt hơn
  4. Cải thiện trải nghiệm phát triển với autocomplete tốt hơn

Giới Thiệu Flow

Bây giờ chúng ta đã biết tại sao kiểm tra loại tĩnh lại quan trọng, hãy gặp bạn mới của chúng ta: Flow. Flow là một công cụ kiểm tra loại tĩnh cho JavaScript, được tạo ra bởi Facebook (các bạn đã tặng chúng ta React). Nó giống như một siêu anh hùng cho mã của bạn, bắt lỗi liên quan đến loại trước khi chúng trở thành vấn đề!

Cài Đặt Flow trong Dự Án React

Hãy cùng nhau làm việc và cài đặt Flow trong một dự án React. Đừng lo lắng, tôi sẽ hướng dẫn bạn từng bước!

  1. Đầu tiên, hãy tạo một dự án React mới:
npx create-react-app my-flow-app
cd my-flow-app
  1. Bây giờ, hãy cài đặt Flow:
npm install --save-dev flow-bin
  1. Thêm một script Flow vào package.json của bạn:
{
"scripts": {
"flow": "flow"
}
}
  1. Khởi tạo Flow:
npm run flow init

Điều này sẽ tạo một tệp .flowconfig trong thư mục gốc của dự án.

  1. Thêm // @flow ở đầu bất kỳ tệp nào bạn muốn Flow kiểm tra.

Sử Dụng Flow trong Thành Phần React

Bây giờ chúng ta đã cài đặt Flow, hãy xem cách chúng ta có thể sử dụng nó trong các thành phần React. Chúng ta sẽ bắt đầu với một ví dụ đơn giản:

// @flow
import React from 'react';

type Props = {
name: string,
age: number
};

function Greeting({ name, age }: Props) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}

export default Greeting;

Hãy phân tích này:

  • // @flow ở đầu cho biết Flow nên kiểm tra tệp này.
  • Chúng ta định nghĩa một loại Props với name là chuỗi và age là số.
  • Trong tham số hàm, chúng ta sử dụng : Props để cho Flow biết hàm này mong đợi các props loại Props.

Bây giờ, nếu chúng ta cố gắng sử dụng thành phần này sai cách, Flow sẽ cảnh báo chúng ta:

// Điều này sẽ gây ra lỗi Flow
<Greeting name={42} age="twenty" />

Flow sẽ thông báo rằng chúng ta đang cố gắng truyền một số cho name (nên là chuỗi) và một chuỗi cho age (nên là số).

Flow với Trạng Thái React

Flow cũng có thể giúp chúng ta với trạng thái của React. Dưới đây là một ví dụ:

// @flow
import React, { useState } from 'react';

type State = {
count: number
};

function Counter() {
const [state, setState] = useState<State>({ count: 0 });

const increment = () => {
setState(prevState => ({ count: prevState.count + 1 }));
};

return (
<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

export default Counter;

Trong ví dụ này:

  • Chúng ta định nghĩa một loại State với một thuộc tính count là số.
  • Chúng ta sử dụng useState<State> để cho Flow biết trạng thái của chúng ta nên khớp với loại State.

Flow với Props React

Hãy xem một ví dụ phức tạp hơn với props:

// @flow
import React from 'react';

type Props = {
items: Array<string>,
onItemClick: (item: string) => void
};

function ItemList({ items, onItemClick }: Props) {
return (
<ul>
{items.map((item, index) => (
<li key={index} onClick={() => onItemClick(item)}>
{item}
</li>
))}
</ul>
);
}

export default ItemList;

Dưới đây là những gì đang xảy ra:

  • Chúng ta định nghĩa Props với một mảng items của chuỗi và một hàm onItemClick nhận một chuỗi và không trả về gì (void).
  • Flow sẽ đảm bảo rằng khi chúng ta sử dụng thành phần này, chúng ta truyền đúng loại props.

Bảng Phương Thức Flow

Dưới đây là bảng các phương thức Flow phổ biến mà bạn sẽ sử dụng trong React:

Phương Thức Mô Tả Ví Dụ
type Định nghĩa một loại mới type Props = { name: string };
interface Định nghĩa một interface mới interface User { name: string, age: number }
$ReadOnly<T> Làm cho tất cả các thuộc tính trong T là readonly type Props = $ReadOnly<{ name: string }>;
$Shape<T> Làm cho tất cả các thuộc tính trong T là tùy chọn type PartialUser = $Shape<User>;
$ElementType<T, K> Lấy loại của một phần tử trong mảng hoặc đối tượng type Name = $ElementType<User, 'name'>;
$Keys<T> Lấy một union type của tất cả các khóa trong T type UserKeys = $Keys<User>;
$Values<T> Lấy một union type của tất cả các giá trị trong T type UserValues = $Values<User>;

Kết Luận

Và thế là chúng ta đã cùng nhau bước những bước đầu tiên vào thế giới kiểm tra loại tĩnh với Flow trong React. Nhớ rằng, giống như học bất kỳ kỹ năng mới nào, nó có thể cảm thấy khó khăn ban đầu. Nhưng với sự luyện tập, bạn sẽ thấy Flow trở thành một công cụ vô giá trong bộ công cụ phát triển React của bạn.

Kiểm tra loại tĩnh có thể trông như là công việc thêm, nhưng tin tôi đi, tương lai bạn sẽ cảm ơn bạn hiện tại vì đã bắt những lỗi loại trước khi chúng trở thành lỗi thời gian chạy!

Tiếp tục lập trình, tiếp tục học hỏi, và trên hết, hãy vui vẻ! React với Flow giống như có một siêu năng lực - sử dụng nó khôn ngoan, và mã của bạn sẽ mạnh mẽ hơn, an toàn hơn và dễ hiểu hơn. Đến gặp lại vào lần sau, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
ReactJS - Props Render
Hướng Dẫn Tiếp Theo:
ReactJS - Chế độ Nghiêm ngặt