React Hook中基于动态格式定义与断言返回类型的方案问询

我写了一个自定义React Hook useFetchSelectOptions，用来获取数据并格式化成下拉选项。根据returnForm参数，返回的选项类型必须是SelectOption[] | null或者Record<string, string> | null，不能是两者的混合类型。

需求明确：

• 当returnForm为'arr'时，options必须是SelectOption[] | null类型
• 当returnForm为'dict'时，options必须是Record<string, string> | null类型

但目前Hook里的条件格式化逻辑导致options的类型被推断为Record<string, string> | SelectOption[] | null，给使用者带来类型歧义。我需要在Hook内部做类型断言，确保返回的options严格匹配returnForm指定的类型，让使用者不用额外做类型检查就能直接用推断出的类型。

当前代码示例：

import { useState, useEffect } from 'react';

export interface SelectOption {
  label: string;
  value: string;
}

// Define a type for the return form
type ReturnForm = 'dict' | 'arr';

export function useFetchSelectOptions<T extends { name: string; id: string }>(
  fetchData: () => Promise<T[]>,
  returnForm: ReturnForm = 'arr', // Default to array format if not specified
): [T[] | null, SelectOption[] | Record<string, string> | null] {
  const [data, setData] = useState<T[] | null>(null);

  useEffect(() => {
    const fetchDataAndMapToOptions = async () => {
      try {
        const fetchedData = await fetchData();
        setData(fetchedData);
      } catch (error) {
        console.error('Error fetching data:', error);
        setData(null);
      }
    };

    fetchDataAndMapToOptions();
  }, [fetchData]);

  let options: SelectOption[] | Record<string, string> | null = data
    ? data.map((item) => ({ label: item.name, value: item.id }))
    : null;

  // Assertion to strictly type 'options' based on 'returnForm'
  if (returnForm === 'dict') {
    options = options?.reduce(
      (acc, curr) => {
        if (curr) {
          acc[curr.value] = curr.label;
        }
        return acc;
      },
      {} as Record<string, string>,
    ) ?? null;
  }

  return [data, options];
}

我已经添加了基础类型断言，但想知道这个实现是否存在问题，以及有没有更优的方式实现严格类型定义。

1. 当前实现的核心问题 #

你现在的代码逻辑上能保证options符合预期类型，但TypeScript的返回类型依然是联合类型SelectOption[] | Record<string, string> | null，使用者无法直接通过returnForm参数推断出具体类型。本质是Hook的返回类型没有和returnForm参数做类型关联。

2. 最优改进方案：泛型关联参数与返回类型 #

通过将ReturnForm作为泛型参数传入，让TypeScript根据returnForm的具体值自动推断options的类型，彻底消除类型歧义。

修改后的代码：

import { useState, useEffect } from 'react';

export interface SelectOption {
  label: string;
  value: string;
}

type ReturnForm = 'dict' | 'arr';

// 映射类型：将ReturnForm值对应到目标options类型
type ReturnFormToOptionType<T extends ReturnForm> = 
  T extends 'arr' ? SelectOption[] | null : 
  T extends 'dict' ? Record<string, string> | null : 
  never;

export function useFetchSelectOptions<
  T extends { name: string; id: string },
  F extends ReturnForm = 'arr' // 默认泛型为'arr'
>(
  fetchData: () => Promise<T[]>,
  returnForm: F = 'arr' as F,
): [T[] | null, ReturnFormToOptionType<F>] {
  const [data, setData] = useState<T[] | null>(null);

  useEffect(() => {
    const fetchDataAndMapToOptions = async () => {
      try {
        const fetchedData = await fetchData();
        setData(fetchedData);
      } catch (error) {
        console.error('Error fetching data:', error);
        setData(null);
      }
    };

    fetchDataAndMapToOptions();
  }, [fetchData]);

  // 先统一转换为数组类型
  const arrayOptions = data ? data.map(item => ({ label: item.name, value: item.id })) : null;

  // 根据returnForm生成对应类型的options，精准类型断言
  const options = returnForm === 'dict' 
    ? (arrayOptions?.reduce((acc, curr) => {
        acc[curr.value] = curr.label;
        return acc;
      }, {} as Record<string, string>) ?? null) as ReturnFormToOptionType<F>
    : arrayOptions as ReturnFormToOptionType<F>;

  return [data, options];
}

3. 改进细节说明 #

• 泛型绑定：通过F extends ReturnForm泛型参数，将returnForm的类型与返回的options类型强关联，TypeScript会自动根据传入的returnForm值推断出options的具体类型。
• 映射类型：ReturnFormToOptionType清晰定义了ReturnForm每个值对应的返回类型，让类型关系更直观。
• 精准断言：针对不同returnForm分支做精准类型断言，确保TypeScript能正确识别每个分支的类型。

4. 使用效果 #

使用者调用Hook时，无需额外类型断言，TypeScript会自动推导正确的options类型：

// options自动推断为SelectOption[] | null
const [data1, options1] = useFetchSelectOptions(fetchUsers);

// options自动推断为Record<string, string> | null
const [data2, options2] = useFetchSelectOptions(fetchUsers, 'dict');

5. 额外优化点 #

• 去掉reduce中的空值检查：arrayOptions?.reduce仅在arrayOptions存在时执行，所以curr必然是SelectOption类型，不会为null。
• 扩展性强：如果需要新增返回格式，只需扩展ReturnForm类型和ReturnFormToOptionType映射逻辑即可。

内容的提问来源于stack exchange，提问作者Aladdin Mhemed