通用 Typescript 类型 + React hook

Question

我有以下 http 挂钩：

export const useHttp = <T,>(initUrl: string, initData: T) => {
    const [url, setUrl] = useState(initUrl);
    const [state, dispatch] = useReducer(fetchReducer, {
        isLoading: false,
        error: '',
        data: initData
    });

    useEffect(() => {
        let cancelRequest = false;

        const fetchData = async (cancelRequest: boolean = false) => {
            if (!url) return;

            dispatch({ type: 'API_REQUEST'});
            try {
                const responsePromise: AxiosPromise<T> = axios(url);
                const response = await responsePromise;
                if (cancelRequest) return;
                dispatch({ type: 'API_SUCCESS', payload: response.data });
            } catch (e) {
                console.log("Got error", e);
                dispatch({ type: 'API_ERROR', payload: e.message });
            }
        };
        fetchData(cancelRequest);

        return () => {
            cancelRequest = true;
        }

    }, [url]);

    const executeFetch = (url: string) => {
        setUrl(url);
    };

    return { ...state, executeFetch}
};

减速器：

const fetchReducer = <T,>(state: IState<T>, action: TAction<T>): IState<T> => {
    switch (action.type) {
        case 'API_REQUEST':
            return {
                ...state,
                isLoading: true
            };
        case 'API_SUCCESS':
            return {
                ...state,
                data: action.payload,
                isLoading: false,
                error: ''
            };
        case 'API_ERROR':
            console.error(`Triggered: ${API_ERROR}, message: ${action.payload}`);
            return {
                ...state,
                error: action.payload,
                isLoading: false,
            };
        default:
            throw Error('Invalid action');
    }
};

行动：

export interface IApiSuccess<T> {
    type: types.ApiSuccess,
    payload: T;
}
export type TAction<T> = IApiRequest | IApiSuccess<T> | IApiError;

像这样使用：

const { data, error, isLoading, executeFetch } = useHttp<IArticle[]>('news', []);

return (
        <>
            <div className={classes.articleListHeader}>
                <h1>Article List</h1>
                <small className={classes.headerSubtitle}>{data.length} Articles</small>
            </div>
            <ul>
                {data.map(article => <Article article={article}/>)}
            </ul>
        </>
    )

我的 TS 对我大喊大叫，因为我正在使用data变量： Object is of type 'unknown'. TS2571 Object is of type 'unknown'. TS2571

我确实指定了 useHttp 的类型，即 IArtlce []。 知道我缺少什么吗？

更新：我试图为我的减速器添加返回类型：

interface HttpReducer<T> extends IState<T> {
    executeFetch: (url: string) => void
}

export const useHttp = <T,>(initUrl: string, initData: T): HttpReducer<T> => {

但我得到：

Type '{ executeFetch: (url: string) => void; error: string; isLoading: boolean; data: unknown; }' is not assignable to type 'HttpReducer<T>'.

Answer 1

我能够重现您的错误。 您期望useReducer钩子能够根据初始 state 的类型推断 state 类型，但它只是推断IState<unknown> 。

useReducer的类型被定义为通用参数是 reducer 的类型。 state 的类型是从具有ReducerState实用程序类型的减速器推断出来的。 它不期望通用减速器并且不能很好地使用它。

挂钩的T与减速机的T没有关系，而不是 state。 fetchReducer是一个通用的 function 这意味着它可以接受任何IState并返回相同类型的IState 。 我们可以使用这个 function 来处理我们的钩子的IState<T> ，但是为了推断 state 的类型，我们需要说我们的 ZC1C425268E68385D1AB5074C17A94F>1 将只接受并返回IState<T>

您需要将useReducer上的泛型设置为：

const [state, dispatch] = useReducer<(state: IState<T>, action: TAction<T>) => IState<T>>( ...

---

从表面上看，这看起来与现在推断的非常相似，即：

const [state, dispatch] = useReducer<<T,>(state: IState<T>, action: TAction<T>) => IState<T>>(...

但差异至关重要。 当前描述了一个通用的 function，而修复描述了一个 function，它只接受一种类型的T即useHttp钩子。 这是误导性的，因为您同时使用T 。 如果我们重命名一个，也许更容易看到。

我们有一个通用的 function：

export const useHttp = <Data,>(initUrl: string, initData: Data) => {
  const [url, setUrl] = useState(initUrl);
  const [state, dispatch] = useReducer<<T,>(state: IState<T>, action: TAction<T>) => IState<T>>(fetchReducer, {

我们需要一个 function 的特定用例：

export const useHttp = <Data,>(initUrl: string, initData: Data) => {
  const [url, setUrl] = useState(initUrl);
  const [state, dispatch] = useReducer<(state: IState<Data>, action: TAction<Data>) => IState<Data>>(fetchReducer, {

当我们知道我们的 reducer state 类型是IState<Data>时，我们就知道data的类型是Data 。

现在调用useHttp<IArticle[]>()会给你一个类型为IArticle[]的data变量。

Typescript 游乐场链接