🫢Cách khai báo các kiểu chung global cho các dự án React TypeScript (ok)

Trong một dự án React TypeScript, khai báo các kiểu dữ liệu global giúp tái sử dụng code, giảm lỗi và dễ bảo trì hơn. Dưới đây là các cách tổ chức và khai báo global types hiệu quả.

Cách 1: Theo kiểu module

1, Tạo thư mục chứa kiểu global

Bạn có thể tạo một thư mục riêng trong src/ để lưu các kiểu global:

src/
│── types/            # Thư mục chứa các kiểu global
│   ├── index.ts      # Export tất cả các kiểu
│   ├── common.ts     # Kiểu chung (Nullable, Theme, BaseResponse...)
│   ├── api.ts        # Kiểu API request/response
│   ├── user.ts       # Kiểu dữ liệu liên quan đến user
│── components/
│── pages/
│── App.tsx
│── main.tsx

2, Khai báo kiểu global trong từng file

— common.ts (Chứa kiểu chung)

export type Nullable<T> = T | null;
export interface BaseResponse<T> {
  success: boolean;
  data: T;
  message?: string;
}
export type Theme = "light" | "dark";
export type ID = string | number;

— user.ts (Chứa kiểu liên quan đến người dùng)

export interface User {
  id: ID;
  name: string;
  email: string;
  avatarUrl?: string;
}
export type UserRole = "admin" | "editor" | "viewer";

— api.ts (Chứa kiểu API)

import { User } from "./user";
export interface LoginRequest {
  email: string;
  password: string;
}
export type LoginResponse = BaseResponse<{ token: string; user: User }>;

3, Xuất tất cả kiểu từ index.ts

Trong types/index.ts, bạn có thể export tất cả các kiểu để dễ import vào các file khác:

export * from "./common";
export * from "./user";
export * from "./api";

Khi cần dùng kiểu, chỉ cần import từ types thay vì từng file riêng lẻ:

import { User, UserRole, LoginRequest } from "../types";

Cách 2: Theo kiểu global

4, Khai báo kiểu global bằng global.d.ts

Nếu bạn muốn khai báo kiểu chung mà không cần import, có thể sử dụng global declaration bằng cách tạo file global.d.ts trong thư mục src/.

Thêm file global.d.ts

src/
│── types/
│── global.d.ts
│── components/
│── pages/
│── App.tsx

Trong global.d.ts

declare global {
  type Nullable<T> = T | null;

  interface BaseResponse<T> {
    success: boolean;
    data: T;
    message?: string;
  }

  type Theme = "light" | "dark";
  type ID = string | number;

  interface User {
    id: ID;
    name: string;
    email: string;
    avatarUrl?: string;
  }

  type UserRole = "admin" | "editor" | "viewer";
}

export {};

Lưu ý: Phải có export {} ở cuối file để TypeScript nhận diện đây là module, tránh lỗi.

Với cách này, bạn không cần import mỗi lần sử dụng kiểu dữ liệu.

Ví dụ sử dụng trực tiếp trong component:

const user: User = {
  id: 1,
  name: "John Doe",
  email: "[e-mail]",
};

Cách 3: Theo kiểu React Context

5, Khai báo kiểu cho React Context

Nếu dự án của bạn có AuthContext hoặc ThemeContext, bạn nên khai báo kiểu cho nó.

Ví dụ khai báo kiểu cho AuthContext

import { createContext, useContext, useState } from "react";
interface AuthContextProps {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
}
const AuthContext = createContext<AuthContextProps | undefined>(undefined);
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  const login = (newUser: User) => setUser(newUser);
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth must be used within an AuthProvider");
  return context;
};

Cách 4: Theo kiểu Redux Toolkit

6, Khai báo kiểu cho Redux Toolkit (nếu dùng Redux)

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./features/userSlice";
export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Sau đó, trong component:

import { useSelector } from "react-redux";
import { RootState } from "../store";
const user = useSelector((state: RootState) => state.user);

7, Tổng kết

Cách khai báo kiểu	Khi nào sử dụng?	Cách truy cập
Thư mục types/	Khi muốn tổ chức kiểu theo module	import { User } from "../types";
File global.d.ts	Khi muốn kiểu dữ liệu có sẵn mà không cần import	Sử dụng trực tiếp
Context API	Khi có global state (Auth, Theme)	useContext(AuthContext)
Redux types	Khi dùng Redux Toolkit	useSelector((state: RootState) => state.user);

Bạn thích cách nào nhất? 🚀