Giới thiệu về TypeScript và React

Trong bài viết này, chúng ta sẽ xây dựng một ứng dụng thư viện phim đơn giản bằng cách sử dụng TypeScript và React. Chúng ta sẽ đề cập đến những điều cơ bản của TypeScript, bao gồm các kiểu, giao diện và ràng buộc kiểu, và cách áp dụng chúng trong một ứng dụng React.

Thiết lập dự án

Để bắt đầu, chúng ta tạo một dự án React mới bằng lệnh npm create react-app movie-library --template typescript. Lệnh này thiết lập một dự án React cơ bản với cấu hình TypeScript.

Tìm hiểu về TypeScript

TypeScript là một tập hợp con của JavaScript, bổ sung thêm kiểu tĩnh tùy chọn và các tính năng khác để cải thiện trải nghiệm phát triển. Nó giúp phát hiện lỗi tại thời điểm biên dịch, giúp việc bảo trì và tái cấu trúc mã dễ dàng hơn.

Tạo giao diện

Trong TypeScript, giao diện (interface) được sử dụng để định nghĩa hình dạng của một đối tượng. Chúng ta tạo một giao diện cho đối tượng phim của mình, có các thuộc tính như id, title, rating và genre.

interface Movie {
  id: number;
  title: string;
  rating: number;
  genre: string;
}

Sử dụng giao diện trong các React Components

Chúng ta có thể sử dụng các giao diện này trong các React component của mình để đảm bảo rằng các prop được truyền vào component tuân thủ hình dạng dự kiến. Ví dụ: trong component MovieCard của chúng ta, chúng ta có thể xác định kiểu prop bằng giao diện Movie.

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  // component implementation
};

Triển khai chức năng tìm kiếm

Để triển khai chức năng tìm kiếm, chúng ta tạo một component SearchBar chấp nhận một chuỗi query làm một prop. Chúng ta sử dụng hook useState để lưu trữ truy vấn và cập nhật nó khi người dùng nhập nội dung gì đó vào thanh tìm kiếm.

const SearchBar = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  return (
    <input type="search" value={query} onChange={handleSearch} />
  );
};

Sử dụng Type Guards

Chúng ta có thể sử dụng type guards để thu hẹp kiểu của một giá trị trong một phạm vi cụ thể. Ví dụ: chúng ta có thể tạo một type guard để kiểm tra xem một giá trị có phải là đối tượng Movie hay không.

function isMovie<T>(value: T): value is Movie {
  return 'id' in value && 'title' in value && 'rating' in value && 'genre' in value;
}

Kết luận

Trong bài viết này, chúng ta đã đề cập đến những điều cơ bản của TypeScript và cách áp dụng nó trong một ứng dụng React. Chúng ta cũng đã triển khai chức năng tìm kiếm và sử dụng type guards để thu hẹp kiểu của một giá trị. Bằng cách sử dụng TypeScript, chúng ta có thể làm cho mã của mình dễ bảo trì và tự ghi lại hơn, đồng thời phát hiện lỗi tại thời điểm biên dịch thay vì thời gian chạy.

Introduction to TypeScript and React