react如何使用useContext + TS 自定义hooks

为了在 TypeScript 中为 useContext 提供良好的类型提示，我们需要为 Context 定义类型，并确保在创建和使用 Context 时应用这些类型。这可以帮助我们获得更好的类型检查和智能提示。

示例：在用户认证示例中添加 TypeScript 类型

1. 定义类型

首先，定义与 Context 相关的数据结构和类型。

// 定义用户和认证状态的类型
interface User {
  username: string;
}

interface AuthContextType {
  user: User | null;
  login: (username: string) => void;
  logout: () => void;
}

1. 创建 Context 并提供值

在创建和使用 Context 时应用这些类型。

import React, { createContext, useContext, useState, ReactNode } from 'react';

// 创建 Context，初始值为 undefined
const AuthContext = createContext<AuthContextType | undefined>(undefined);

interface AuthProviderProps {
  children: ReactNode;
}

export function AuthProvider({ children }: AuthProviderProps) {
  const [user, setUser] = useState<User | null>(null);

  const login = (username: string) => {
    setUser({ username });
  };

  const logout = () => {
    setUser(null);
  };

  // 提供的值包含用户状态和登录、登出函数
  const value = {
    user,
    login,
    logout,
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

1. 在组件中使用 Context

当我们在组件中使用 useAuth 时，TypeScript 将提供准确的类型提示。

import React from 'react';
import { useAuth, AuthProvider } from './AuthContext';

function UserProfile() {
  const { user, logout } = useAuth();

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user.username}!</p>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

function LoginForm() {
  const { login } = useAuth();

  const handleLogin = () => {
    login('username');
  };

  return (
    <button onClick={handleLogin}>Login</button>
  );
}

function App() {
  return (
    <AuthProvider>
      <UserProfile />
      <LoginForm />
    </AuthProvider>
  );
}

export default App;

总结

通过在 Context 和相关函数中添加类型定义，我们可以在 TypeScript 中获得更好的类型检查和智能提示。这些类型定义有助于捕获潜在的错误，并使代码更易于维护和理解。