Giới Thiệu

React là một trong những thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng. Khi kết hợp với TypeScript, bạn sẽ nhận được tính năng an toàn kiểu, công cụ tốt hơn và ít lỗi thời gian chạy hơn. Trong hướng dẫn này, chúng ta sẽ thiết lập dự án React + TypeScript và hiểu các khái niệm cơ bản.

Tạo Dự Án React + TypeScript Mới

Cách dễ nhất để bắt đầu là sử dụng Vite, một công cụ nhanh và nhẹ:

bash Copy

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

👉 Lệnh trên sẽ thiết lập ngay lập tức một dự án React + TypeScript.

Định Nghĩa Props Với TypeScript

Trong React thông thường, bạn có thể viết như sau:

javascript Copy

function Greeting(props) {
  return (
    <h1>Hello, {props.name}!</h1>
  );
}

Với TypeScript, chúng ta sẽ định nghĩa kiểu cho props:

typescript Copy

type GreetingProps = {
  name: string;
  age?: number; // tùy chọn
};

function Greeting({ name, age }: GreetingProps) {
  return (
    <h1>Hello, {name}! {age && `(Age: ${age})`}</h1>
  );
}

export default Greeting;

Lợi Ích:

Tự động hoàn thành trong IDE
Kiểm tra kiểu tại thời điểm biên dịch
Không còn bất ngờ “undefined”

Sử Dụng useState Với Kiểu Dữ Liệu

Đôi khi TypeScript không thể suy luận kiểu trạng thái. Bạn có thể chỉ định kiểu một cách rõ ràng:

javascript Copy

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>➕ Tăng</button>
    </div>
  );
}

export default Counter;

Ở đây, useState(0) đảm bảo rằng count sẽ luôn là một số.

Định Kiểu Phản Hồi API

Khi lấy dữ liệu, bạn có thể định nghĩa một interface:

typescript Copy

type User = {
  id: number;
  name: string;
  email: string;
};

async function fetchUsers(): Promise<User[]> {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
}

Bây giờ, khi bạn sử dụng User, bạn sẽ nhận được tính năng tự hoàn thành và an toàn kiểu.

Thực Hành Tốt Nhất

Luôn định nghĩa kiểu cho props và trạng thái để tận dụng tối đa tính năng của TypeScript.
Thực hiện kiểm tra kiểu cho dữ liệu nhận được từ API.

Cạm Bẫy Thường Gặp

Không định nghĩa đúng kiểu có thể dẫn đến lỗi khó phát hiện.
Nhầm lẫn giữa kiểu dữ liệu và các giá trị mặc định.

Mẹo Tối Ưu Hiệu Suất

Sử dụng React.memo để tối ưu hóa các component không cần thiết phải render lại.
Giảm thiểu số lần gọi API bằng cách lưu trữ dữ liệu cục bộ khi cần thiết.

Khắc Phục Sự Cố

Nếu gặp lỗi khi biên dịch, hãy kiểm tra lại các kiểu đã định nghĩa và đảm bảo rằng không có sự không tương thích.
Sử dụng console.log để theo dõi dữ liệu và kiểm tra xem nó có đúng như mong đợi hay không.

Kết Luận

React + TypeScript có thể ban đầu cảm thấy là một công việc thêm vào, nhưng sự tự tin và năng suất mà bạn nhận được là rất đáng giá. IDE của bạn sẽ giúp phát hiện lỗi trước khi chúng xảy ra trong thời gian chạy, và mã của bạn sẽ dễ duy trì hơn. Các đồng đội của bạn sẽ cảm ơn bạn vì điều này. 🙌

👉 Bạn có đang sử dụng TypeScript với React trong các dự án của mình không? Hãy chia sẻ kinh nghiệm của bạn bên dưới!

Hướng Dẫn Bắt Đầu với React + TypeScript Cho Người Mới