React Hooks + TypeScript 实战记录：玩转函数式编程和 TypeScript 类型安全

2023-12-23 09:19:48

React Hooks 提供了一种在不编写类组件的情况下使用状态和其他 React 特性的方法。TypeScript 则是 JavaScript 的超集，提供了静态类型检查功能，有助于在编译阶段发现错误。

为何结合使用 Hooks 和 TypeScript？

提高代码质量：通过类型安全保证数据结构的正确性。
增强可维护性：明确的数据类型增强了代码的可读性和可维护性。
简化开发流程：减少运行时错误，提升开发效率。

基础概念

使用 useState 和 TypeScript

在使用 useState 时，TypeScript 能够自动推断状态的类型。如果需要显式指定类型，可以通过泛型来设置。

import { useState } from 'react';

function Example() {
    // 设置 state 的类型为 string
    const [text, setText] = useState<string>('Hello');
    
    return (
        <div>
            <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
            <p>{text}</p>
        </div>
    );
}

自定义 Hooks 的类型

自定义 Hooks 时，可以通过 TypeScript 提供精确的函数签名。

import { useState, useEffect } from 'react';

// 定义一个带有类型的自定义 Hook
function useFetch<T>(url: string) {
    const [data, setData] = useState<T | null>(null);
    const [loading, setLoading] = useState<boolean>(true);

    useEffect(() => {
        fetch(url)
            .then((res) => res.json())
            .then(setData)
            .finally(() => setLoading(false));
    }, [url]);

    return { data, loading };
}

// 使用自定义 Hook
function Example() {
    const { data, loading } = useFetch<User>('https://api.example.com/user');
    
    if (loading) return <p>Loading...</p>;
    if (!data) return <p>No data</p>;

    return (
        <div>
            <h1>{data.name}</h1>
            <p>{data.email}</p>
        </div>
    );
}

使用 Context 和 TypeScript

当在组件树中传递数据时，使用 Context 可以减少 props 的传递。结合 TypeScript 确保上下文提供的值类型正确。

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

interface ThemeContextProps {
    theme: string;
    setTheme: (theme: string) => void;
}

const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);

function App() {
    const [theme, setTheme] = useState<string>('light');

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            <ChildComponent />
        </ThemeContext.Provider>
    );
}

function ChildComponent() {
    const { theme } = useContext(ThemeContext)!;

    // 确保使用上下文的组件不会尝试访问 undefined 的属性
    if (!theme) throw new Error('Theme context not found');

    return (
        <div style={{ background: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
            Theme is {theme}
        </div>
    );
}