Giới Thiệu Về TypeScript và ReactJS
Trong bài viết này, chúng ta sẽ cùng nhau khám phá những tính năng cơ bản và nâng cao của TypeScript khi kết hợp với ReactJS. Bạn sẽ được tìm hiểu về các khái niệm như Enums, Interfaces, Generics, Type Annotations, Intersection Type, Union Type, Type Guard thông qua ví dụ thực tế dưới đây.
1. Trang TypeScript (TypeScriptPage.tsx)
Chúng ta bắt đầu với một ví dụ về việc xử lý trạng thái người dùng trong một ứng dụng React sử dụng TypeScript:
typescript
import React, { useState, useEffect, useReducer } from 'react';
import styles from './TypeScriptPage.module.css';
// Enum cho các vai trò của người dùng
enum UserRole {
Admin = 'Admin',
User = 'User',
Guest = 'Guest',
}
// Interface cho dữ liệu người dùng cơ bản
interface User {
id: number;
name: string;
email?: string; // Ví dụ về thuộc tính tùy chọn
role: UserRole;
}
// Kiểu AdminUser sử dụng Intersection để thêm quyền hạn cho User
type AdminUser = User & { permissions: string[] }; // Tương đương với việc mở rộng Interface
// Kiểu Union cho người dùng với các cấu trúc khác nhau
type UserType = User | AdminUser;
// Type Guard để kiểm tra xem một người dùng có phải là AdminUser không
const isAdminUser = (user: UserType): user is AdminUser => {
return (user as AdminUser).permissions !== undefined;
};
// Kiểu alias cho danh sách người dùng
type UserList = User[];
// Ví dụ về các kiểu tiện ích
// Utility types: Omit, Pick, và Partial
...Trong ví dụ trên, chúng ta đã sử dụng Enums để định nghĩa các vai trò của người dùng, Interfaces để xác định cấu trúc dữ liệu người dùng, và Type Guards để phân loại người dùng dựa trên quyền hạn của họ.
2. Sử Dụng Utility Types
TypeScript cung cấp một số kiểu tiện ích hữu ích, giúp lập trình viên dễ dàng quản lý và xử lý dữ liệu:
- Omit: Loại bỏ thuộc tính không cần thiết (ví dụ:
UserWithoutEmail). - Pick: Chọn ra một số thuộc tính cần thiết (ví dụ:
UserContactInfo). - Partial: Tạo ra loại mới với tất cả thuộc tính là tùy chọn (ví dụ:
PartialUser).
3. Hàm Generic
Chúng ta có thể tạo ra các hàm tóm tắt dữ liệu với kiểu Generic, giúp tăng tính tái sử dụng trong gcode. Ví dụ như hàm fetchData<T>, cho phép chúng ta định nghĩa kiểu dữ liệu mà hàm sẽ trả về:
typescript
async function fetchData<T>(url: string, options: RequestInit = {}): Promise<T> {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
}4. Quản Lý Trạng Thái Bằng useReducer
Chúng ta sử dụng useReducer để quản lý trạng thái của danh sách người dùng, cho phép thực hiện các hành động thêm, sửa, xóa người dùng một cách hiệu quả:
typescript
type UserAction =
| { type: 'add'; payload: User }
| { type: 'remove'; id: number }
| { type: 'update'; payload: { id: number; updates: PartialUser } };
const userReducer = (state: User[], action: UserAction): User[] => {
switch (action.type) {
case 'add':
return [...state, action.payload];
case 'remove':
return state.filter(user => user.id !== action.id);
case 'update':
return state.map(user =>
user.id === action.payload.id ? { ...user, ...action.payload.updates } : user
);
default:
return state;
}
};5. Giao Diện Người Dùng
Chúng ta cũng xây dựng giao diện cho phép người dùng thêm mới, cập nhật, và xóa người dùng. Mỗi người dùng sẽ được hiển thị với các thông tin như tên, email và vai trò của họ:
jsx
const TypeScriptPage: React.FC = () => {
// Khai báo trạng thái và các phương thức
...
return (
<div className={styles.container}>
<h1 className={styles.title}>Trang Tính Năng Nâng Cao Của TypeScript</h1>
<h2 className={styles.subtitle}>Thêm Người Dùng Mới</h2>
<div className={styles.addUserForm}>
<input type="text" placeholder="Tên" ... />
<input type="email" placeholder="Email" ... />
<select value={newUser.role} ...>
<option value={UserRole.Guest}>Khách</option>
<option value={UserRole.User}>Người Dùng</option>
<option value={UserRole.Admin}>Quản Trị Viên</option>
</select>
<button onClick={handleAddUser}>Thêm Người Dùng</button>
</div>
</div>
);
};6. Kết Luận
Bài viết này đã cung cấp cái nhìn tổng quan về cách sử dụng TypeScript với ReactJS, giúp bạn nắm rõ các tính năng nâng cao cũng như cách thức tổ chức mã nguồn một cách hiệu quả. Nếu bạn thấy bài viết hữu ích, hãy chia sẻ và cho chúng tôi biết ý kiến của bạn nhé!
source: viblo
