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

Trong một dự án Next.js sử dụng TypeScript, bạn có thể khai báo các kiểu dữ liệu chung (global types) để tái sử dụng trong toàn bộ dự án. Dưới đây là một số cách phổ biến để làm điều này:

Cách 1 sử dụng kiểu module giống với reactjs

1. Tạo file types.d.ts hoặc global.d.ts

Bạn có thể tạo một file types.d.ts hoặc global.d.ts trong thư mục src/types/ hoặc ngay trong src/ để chứa các kiểu dùng chung.

Ví dụ:

// src/types/global.d.ts
export interface User {
  id: number;
  name: string;
  email: string;
}
export type ApiResponse<T> = {
  success: boolean;
  data: T;
};

Cách 2 sử dụng kiểu global

2. Khai báo kiểu trong global.d.ts mà không cần import

Nếu bạn muốn khai báo các kiểu mà không cần import trong mỗi file, bạn có thể đặt chúng vào global.d.ts và sử dụng từ khóa declare.

// src/types/global.d.ts
declare global {
  interface User {
    id: number;
    name: string;
    email: string;
  }

  type ApiResponse<T> = {
    success: boolean;
    data: T;
  };
}

export {}; // Để tránh lỗi khi TypeScript kiểm tra module

Lưu ý: Khi sử dụng declare global, bạn không cần import trong các file khác vì các kiểu này đã có sẵn trong phạm vi global.

Cách 3 sử dụng kiểu tsconfig.json để nhận diện

3. Khai báo tsconfig.json để nhận diện types

Trong tsconfig.json, bạn cần đảm bảo TypeScript nhận diện các file *.d.ts bằng cách thêm vào include:

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@types/*": ["src/types/*"]
    }
  },
  "include": ["next-env.d.ts", "src/**/*"]
}

Nếu bạn sử dụng global.d.ts, đảm bảo rằng nó nằm trong thư mục được TypeScript nhận diện.

Sử dụng alias để import kiểu dễ dàng

Bạn có thể đặt alias trong tsconfig.json để dễ dàng import kiểu dữ liệu:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@types/*": ["src/types/*"],
      "@models/*": ["src/models/*"]
    }
  }
}

Sau đó, trong code bạn có thể import kiểu như sau:

import { User } from "@types/global";

Cách 4 sử dụng Context API hoặc Redux Store giống với bên Reactjs

4. Khai báo kiểu cho Context API hoặc Redux Store

Nếu bạn sử dụng Context API hoặc Redux, bạn có thể định nghĩa kiểu như sau:

// src/types/auth.ts
export interface AuthState {
  isAuthenticated: boolean;
  user: User | null;
}

Sau đó dùng trong context:

const AuthContext = createContext<AuthState | undefined>(undefined);

Cách 5 sử dụng API

5. Khai báo kiểu cho API Routes trong Next.js

Khi làm việc với API routes của Next.js, bạn có thể tạo kiểu chung cho req và res:

// src/types/api.ts
import { NextApiRequest, NextApiResponse } from "next";
export type ApiHandler<T = any> = (
  req: NextApiRequest,
  res: NextApiResponse<ApiResponse<T>>
) => void;

Sau đó dùng trong API route:

import { ApiHandler } from "@types/api";
const handler: ApiHandler<{ message: string }> = (req, res) => {
  res.json({ success: true, data: { message: "Hello World" } });
};
export default handler;

Tổng kết

• Tạo file global.d.ts để khai báo kiểu chung mà không cần import.

• Tạo types.d.ts nếu muốn import các kiểu dữ liệu một cách rõ ràng.

• Sử dụng alias trong tsconfig.json để import kiểu dễ dàng.

• Định nghĩa kiểu cụ thể cho Context API, Redux Store hoặc API Routes.

Với cách này, bạn sẽ có một codebase sạch và dễ quản lý hơn trong dự án Next.js + TypeScript. 🚀