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

Trong bài viết này, chúng ta sẽ khám phá những điều cơ bản của TypeScript và React bằng cách xây dựng một ứng dụng thư viện phim đơn giản. Chúng ta sẽ đề cập đến việc cài đặt TypeScript, thiết lập một dự án mới và tạo các component, interface và type.

Bắt đầu với TypeScript và React

Để bắt đầu, chúng ta cần 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 sẽ thiết lập một dự án React mới với sự hỗ trợ của TypeScript.

Tìm hiểu những điều cơ bản về TypeScript

TypeScript là một phần mở rộng 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ó được thiết kế để giúp các nhà phát triển phát hiện lỗi sớm và cải thiện khả năng bảo trì mã, do đó nó trở thành một lựa chọn phổ biến cho các ứng dụng lớn và phức tạp.

Một trong những tính năng chính của TypeScript là khả năng định nghĩa interface, được sử dụng để định nghĩa hình dạng của các đối tượng. Chúng ta có thể sử dụng interface để xác định cấu trúc dữ liệu của mình, giúp làm việc với dữ liệu dễ dàng hơn và giảm lỗi.

Tạo Interface

Để chứng minh cách interface hoạt động, hãy tạo một interface đơn giản cho một đối tượng phim. Chúng ta sẽ định nghĩa một interface có tên là Movie với các thuộc tính cho id, title, rating, genre và image.

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

Sử dụng Interface trong React Component

Bây giờ chúng ta đã có interface Movie, chúng ta có thể sử dụng nó để xác định các prop của một React component. Hãy tạo một component MovieCard chấp nhận một prop movie có type Movie.

import React from 'react';

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  return (
    <div>
      <h2>{movie.title}</h2>
      <p>Rating: {movie.rating}</p>
      <p>Genre: {movie.genre}</p>
      <img src={movie.image} alt={movie.title} />
    </div>
  );
};

export default MovieCard;

Sử dụng React.FC

Trong ví dụ trên, chúng ta đã sử dụng type React.FC để định nghĩa component MovieCard. Đây là một type generic đại diện cho một functional component. FC là viết tắt của "function component".

Tạo Thanh Tìm Kiếm

Tiếp theo, hãy tạo một search bar component cho phép người dùng tìm kiếm phim theo title hoặc genre. Chúng ta sẽ định nghĩa một interface cho các prop của search bar và tạo một component mới chấp nhận prop này.

interface SearchBarProps {
  onSearch: (query: string) => void;
}

const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
  const [query, setQuery] = useState('');

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

  return (
    <input
      type="text"
      value={query}
      onChange={handleSearch}
      placeholder="Search for movies"
    />
  );
};

Xử Lý Sự Kiện

Trong search bar component, chúng ta đã xử lý sự kiện onChange của trường input bằng hàm handleSearch. Hàm này cập nhật state query và gọi prop onSearch với giá trị query mới.

Sử Dụng Event Type

TypeScript cung cấp một loạt các event type mà chúng ta có thể sử dụng để type cho các trình xử lý sự kiện của mình. Ví dụ: chúng ta đã sử dụng type React.ChangeEvent<HTMLInputElement> để type cho hàm handleSearch.

Tạo Hàm Sắp Xếp

Hãy tạo một hàm sắp xếp sắp xếp phim theo title, rating hoặc genre. Chúng ta sẽ định nghĩa một interface cho các tùy chọn sắp xếp và tạo một hàm mới chấp nhận prop này.

interface SortOptions {
  sort: string;
}

const sortMovies = (movies: Movie[], sort: SortOptions) => {
  switch (sort.sort) {
    case 'title':
      return movies.sort((a, b) => a.title.localeCompare(b.title));
    case 'rating':
      return movies.sort((a, b) => a.rating - b.rating);
    default:
      return movies;
  }
};

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à React bằng cách xây dựng một ứng dụng thư viện phim đơn giản. Chúng ta đã tạo interface, component và type, đồng thời sử dụng chúng để xác định cấu trúc dữ liệu và prop của mình. Chúng ta cũng đã xử lý các sự kiện và sử dụng các event type để type cho các trình xử lý sự kiện của mình. Ngoài ra, chúng ta đã tạo một hàm sắp xếp sắp xếp phim theo title, rating hoặc genre.

Introduction to TypeScript and React

What is TypeScript?

Creating Interfaces

Using Interfaces in React Components

Creating a Search Bar

Handling Events

Using Event Types

Bài viết này thể hiện sức mạnh của TypeScript trong việc xây dựng các ứng dụng mạnh mẽ và dễ bảo trì. Bằng cách sử dụng interface, component và type, chúng ta có thể đảm bảo rằng mã của chúng ta có cấu trúc tốt và dễ hiểu. Ngoài ra, việc xử lý các sự kiện và sử dụng các event type có thể giúp chúng ta viết mã hiệu quả hơn.